# Interface: TitleObject

## Highcharts. TitleObject

The chart title. The title has an `update` method that allows modifying the options directly or indirectly via `chart.update`.

### Extends

- Highcharts.SVGElement

### Members

#### element :Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement

  The primary DOM node. Each `SVGElement` instance wraps a main DOM node, but may also represent more nodes.

  ##### Type:

  - Highcharts.SVGDOMElement | Highcharts.HTMLDOMElement
  Inherited From:
    - Highcharts.SVGElement#element

#### renderer :Highcharts.SVGRenderer

  The renderer that the SVGElement belongs to.

  ##### Type:

  - Highcharts.SVGRenderer
  Inherited From:
    - Highcharts.SVGElement#renderer

### Methods

#### add( [parent])

  Add the element to the DOM. All elements must be added this way.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `parent` | Highcharts.SVGElement | <optional> | The parent item to add it to. If undefined, the element is added to the Highcharts.SVGRenderer.box.

  Inherited From:
    - Highcharts.SVGElement#add

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

  ##### Try it

  - Elements added to a group.

#### addClass(className [, replace])

  Add a class name to an element.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `className` | string |  |  | The new class name to add.
  `replace` | boolean | <optional> | false | When true, the existing class name(s) will be overwritten with the new one. When false, the new one is added.

  Inherited From:
    - Highcharts.SVGElement#addClass

  ##### Returns:

  Highcharts.SVGElement .

  Return the SVG element for chainability.

#### align( [alignOptions] [, alignByTranslate] [, alignTo] [, redraw])

  Align the element relative to the chart or another box.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `alignOptions` | Highcharts.AlignObject | <optional> | The alignment options. The function can be called without this parameter in order to re-align an element after the box has been updated.
  `alignByTranslate` | boolean | <optional> | Align element by translation.
  `alignTo` | string | Highcharts.BBoxObject | <optional> | The box to align to, needs a width and height. When the box is a string, it refers to an object in the Renderer. For example, when box is `spacingBox`, it refers to `Renderer.spacingBox` which holds `width`, `height`, `x` and `y` properties.
  `redraw` | boolean | <optional> | Decide if SVGElement should be redrawn with new alignment or just change its attributes.

  Inherited From:
    - Highcharts.SVGElement#align

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

#### animate(params [, options] [, complete])

  Animate to given attributes or CSS properties.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `params` | Highcharts.SVGAttributes |  | SVG attributes or CSS to animate.
  `options` | boolean | Partial.<Highcharts.AnimationOptionsObject> | <optional> | Animation options.
  `complete` | function | <optional> | Function to perform at the end of animation.

  Inherited From:
    - Highcharts.SVGElement#animate

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

  ##### Try it

  - Setting some attributes by animation.

#### attr(key)

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `key` | string |

  Inherited From:
    - Highcharts.SVGElement#attr
  Overrides:
    - Highcharts.SVGElement#attr

  ##### Returns:

#### clip( [clipElem])

  Apply a clipping shape to this element.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `clipElem` | Highcharts.SVGElement | <optional> | The clipping shape. If skipped, the current clip is removed.

  Inherited From:
    - Highcharts.SVGElement#clip

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVG element to allow chaining.

#### crisp(rect [, strokeWidth])

  Calculate the coordinates needed for drawing a rectangle crisply and return the calculated attributes.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `rect` | Highcharts.RectangleObject |  | Rectangle to crisp.
  `strokeWidth` | number | <optional> | The stroke width to consider when computing crisp positioning. It can also be set directly on the rect parameter.

  Inherited From:
    - Highcharts.SVGElement#crisp

  ##### Returns:

  Highcharts.RectangleObject .

  The modified rectangle arguments.

#### css(styles)

  Set styles for the element. In addition to CSS styles supported by native SVG and HTML elements, there are also some custom made for Highcharts, like `width`, `ellipsis` and `textOverflow` for SVG text elements.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `styles` | Highcharts.CSSObject | The new CSS styles.

  Inherited From:
    - Highcharts.SVGElement#css

  ##### Returns:

  Highcharts.SVGElement .

  Return the SVG element for chaining.

  ##### Try it

  - Styled text.

#### destroy()

  Destroy the element and element wrapper and clear up the DOM and event hooks.

  Inherited From:
    - Highcharts.SVGElement#destroy

#### fadeIn( [animation])

  A general fadeIn method.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `animation` | boolean | Partial.<Highcharts.AnimationOptionsObject> | <optional> | The animation options for the element fade.

  Inherited From:
    - Highcharts.SVGElement#fadeIn

  ##### Requires:

  - module:modules/drilldown

#### getBBox( [reload] [, rot])

  Get the bounding box (width, height, x and y) for the element. Generally used to get rendered text size. Since this is called a lot in charts, the results are cached based on text properties, in order to save DOM traffic. The returned bounding box includes the rotation, so for example a single text line of rotation 90 will report a greater height, and a width corresponding to the line-height.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `reload` | boolean | <optional> | Skip the cache and get the updated DOM bounding box.
  `rot` | number | <optional> | Override the element's rotation. This is internally used on axis labels with a value of 0 to find out what the bounding box would be have been if it were not rotated.

  Inherited From:
    - Highcharts.SVGElement#getBBox

  ##### Returns:

  Highcharts.BBoxObject .

  The bounding box with `x`, `y`, `width` and `height` properties.

  ##### Try it

  - Draw a rectangle based on a text's bounding box.

#### getBBoxCacheKey()

  Overridable method to get a cache key for the bounding box of this element.

  Inherited From:
    - Highcharts.SVGElement#getBBoxCacheKey

  ##### Returns:

  string | void .

  The cache key based on the text properties.

  ##### Example

      // Plugin to let the getBBox function respond to font family changes
      (({ SVGElement }) => {
      const getBBoxCacheKey = SVGElement.prototype.getBBoxCacheKey;
        SVGElement.prototype.getBBoxCacheKey = function (keys) {
          const key = getBBoxCacheKey.call(this, keys);
          const fontFamily = this.styles.fontFamily;
          return key + (fontFamily ? `,${fontFamily}` : '');
        };
      })(Highcharts);

#### getStyle(prop)

  Get the computed style. Only in styled mode.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `prop` | string | The property name to check for.

  Inherited From:
    - Highcharts.SVGElement#getStyle

  ##### Returns:

  string .

  The current computed value.

  ##### Example

      chart.series[0].points[0].graphic.getStyle('stroke-width'); // => '1px'

#### hasClass(className)

  Check if an element has the given class name.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `className` | string | The class name to check for.

  Inherited From:
    - Highcharts.SVGElement#hasClass

  ##### Returns:

  boolean .

  Whether the class name is found.

#### hide()

  Hide the element, similar to setting the `visibility` attribute to `hidden`.

  Inherited From:
    - Highcharts.SVGElement#hide

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

#### init(renderer, nodeName)

  Initialize the SVG element. This function only exists to make the initialization process overridable. It should not be called directly.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `renderer` | Highcharts.SVGRenderer | The SVGRenderer instance to initialize to.
  `nodeName` | string | The SVG node name.

  Inherited From:
    - Highcharts.SVGElement#init

#### on(eventType, handler)

  Add an event listener. This is a simple setter that replaces the previous event of the same type added by this function, as opposed to the Highcharts#addEvent function.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `eventType` | string | The event type.
  `handler` | function | The handler callback.

  Inherited From:
    - Highcharts.SVGElement#on

  ##### Returns:

  Highcharts.SVGElement .

  The SVGElement for chaining.

  ##### Try it

  - A clickable rectangle.

#### removeClass(className)

  Remove a class name from the element.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `className` | string | RegExp | The class name to remove.

  Inherited From:
    - Highcharts.SVGElement#removeClass

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVG element for chainability.

#### setRadialReference(coordinates)

  Set the coordinates needed to draw a consistent radial gradient across a shape regardless of positioning inside the chart. Used on pie slices to make all the slices have the same radial reference point.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `coordinates` | Array.<number> | The center reference. The format is `[centerX, centerY, diameter]` in pixels.

  Inherited From:
    - Highcharts.SVGElement#setRadialReference

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

#### shadow( [shadowOptions])

  Add a shadow to the element. In styled mode, this method is not used, instead use `defs` and filters.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `shadowOptions` | boolean | Highcharts.ShadowOptionsObject | <optional> | The shadow options. If `true`, the default options are applied. If `false`, the current shadow will be removed.

  Inherited From:
    - Highcharts.SVGElement#shadow

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

  ##### Example

      renderer.rect(10, 100, 100, 100)
          .attr({ fill: 'red' })
          .shadow(true);

#### show( [inherit])

  Show the element after it has been hidden.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `inherit` | boolean | <optional> | true | Set the visibility attribute to `inherit` rather than `visible`. The difference is that an element with `visibility="visible"` will be visible even if the parent is hidden.

  Inherited From:
    - Highcharts.SVGElement#show

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

#### strokeWidth()

  Get the computed stroke width in pixel values. This is used extensively when drawing shapes to ensure the shapes are rendered crisp and positioned correctly relative to each other. Using `shape-rendering: crispEdges` leaves us less control over positioning, for example when we want to stack columns next to each other, or position things pixel-perfectly within the plot box.

  The common pattern when placing a shape is:

  - Create the SVGElement and add it to the DOM. In styled mode, it will now receive a stroke width from the style sheet. In classic mode we will add the `stroke-width` attribute.
  - Read the computed `elem.strokeWidth()`.
  - Place it based on the stroke width.
  Inherited From:
    - Highcharts.SVGElement#strokeWidth

  ##### Returns:

  number .

  The stroke width in pixels. Even if the given stroke width (in CSS or by attributes) is based on `em` or other units, the pixel size is returned.

#### toFront()

  Bring the element to the front. Alternatively, a new zIndex can be set.

  Inherited From:
    - Highcharts.SVGElement#toFront

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

  ##### Try it

  - Click an element to bring it to front.

#### translate(x, y)

  Move an object and its children by x and y values.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `x` | number | The x value.
  `y` | number | The y value.

  Inherited From:
    - Highcharts.SVGElement#translate

  ##### Returns:

  Highcharts.SVGElement .

  Translated element.

#### update(titleOptions [, redraw])

  Modify options for the title.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `titleOptions` | Highcharts.TitleOptions |  |  | Options to modify.
  `redraw` | boolean | <optional> | true | Whether to redraw the chart after the title is altered. If doing more operations on the chart, it is a good idea to set redraw to false and call Highcharts.Chart#redraw after.