Interface: SubtitleObject

Highcharts. SubtitleObject

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

Extends

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:
Inherited From:

renderer :Highcharts.SVGRenderer

The renderer that the SVGElement belongs to.

Type:
Inherited From:

Methods

add( [parent])

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

Parameters:
Name Type Argument Description
parent Highcharts.SVGElement | Highcharts.SVGDOMElement <optional>

The parent item to add it to. If undefined, the element is added to the Highcharts.SVGRenderer.box.

Inherited From:
Returns:
Highcharts.SVGElement .

Returns the SVGElement for chaining.

Try it

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:
Returns:
Highcharts.SVGElement .

Return the SVG element for chainability.

align( [alignOptions] [, alignByTranslate] [, box])

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.

box 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.

Inherited From:
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 Highcharts.AnimationOptionsObject <optional>

Animation options.

complete function <optional>

Function to perform at the end of animation.

Inherited From:
Returns:
Highcharts.SVGElement .

Returns the SVGElement for chaining.

Try it

attr( [hash] [, val] [, complete] [, continueAnimation])

Apply native and custom attributes to the SVG elements.

In order to set the rotation center for rotation, set x and y to 0 and use translateX and translateY attributes to position the element instead.

Attributes frequently used in Highcharts are fill, stroke, stroke-width.

Parameters:
Name Type Argument Default Description
hash string | Highcharts.SVGAttributes <optional>

The native and custom SVG attributes.

val string <optional>

If the type of the first argument is string, the second can be a value, which will serve as a single attribute setter. If the first argument is a string and the second is undefined, the function serves as a getter and the current value of the property is returned.

complete function <optional>

A callback function to execute after setting the attributes. This makes the function compliant and interchangeable with the Highcharts.SVGElement#animate function.

continueAnimation boolean <optional>
true

Used internally when .attr is called as part of an animation step. Otherwise, calling .attr for an attribute will stop animation for that attribute.

Inherited From:
Returns:
number | string | Highcharts.SVGElement .

If used as a setter, it returns the current Highcharts.SVGElement so the calls can be chained. If used as a getter, the current value of the attribute is returned.

Example
// Set multiple attributes
element.attr({
    stroke: 'red',
    fill: 'blue',
    x: 10,
    y: 10
});

// Set a single attribute
element.attr('stroke', 'red');

// Get an attribute
element.attr('stroke'); // => 'red'
Try it

clip( [clipRect])

Apply a clipping rectangle to this element.

Parameters:
Name Type Argument Description
clipRect Highcharts.ClipRectElement <optional>

The clipping rectangle. If skipped, the current clip is removed.

Inherited From:
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:
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:
Returns:
Highcharts.SVGElement .

Return the SVG element for chaining.

Try it

destroy()

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

Inherited From:

fadeIn( [animation])

A general fadeIn method.

Parameters:
Name Type Argument Description
animation Highcharts.AnimationOptionsObject <optional>
Inherited From:
Requires:
  • module:modules/drilldown

fadeOut( [duration])

Fade out an element by animating its opacity down to 0, and hide it on complete. Used internally for the tooltip.

Parameters:
Name Type Argument Default Description
duration number <optional>
150

The fade duration in milliseconds.

Inherited From:

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 bouding 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:
Returns:
Highcharts.BBoxObject .

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

Try it

getStyle(prop)

Get the computed style. Only in styled mode.

Parameters:
Name Type Description
prop string

The property name to check for.

Inherited From:
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:
Returns:
boolean .

Whether the class name is found.

hide()

Hide the element, equivalent to setting the visibility attribute to hidden.

Inherited From:
Returns:
Highcharts.SVGElement .

Returns the SVGElement for chaining.

init(renderer, nodeName)

Initialize the SVG element. This function only exists to make the initiation 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:

invert(inverted)

Invert a group, rotate and flip. This is used internally on inverted charts, where the points and graphs are drawn as if not inverted, then the series group elements are inverted.

Parameters:
Name Type Description
inverted boolean

Whether to invert or not. An inverted shape can be un-inverted by setting it to false.

Inherited From:
Returns:
Highcharts.SVGElement .

Return the SVGElement for chaining.

on(eventType, handler)

Add an event listener. This is a simple setter that replaces all other events of the same type, opposed to the Highcharts#addEvent function.

Parameters:
Name Type Description
eventType string

The event type. If the type is click, Highcharts will internally translate it to a touchstart event on touch devices, to prevent the browser from waiting for a click event from firing.

handler function

The handler callback.

Inherited From:
Returns:
Highcharts.SVGElement .

The SVGElement for chaining.

Try it

removeClass(className)

Remove a class name from the element.

Parameters:
Name Type Description
className string | RegExp

The class name to remove.

Inherited From:
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:
Returns:
Highcharts.SVGElement .

Returns the SVGElement for chaining.

shadow(shadowOptions [, group] [, cutOff])

Add a shadow to the element. Must be called after the element is added to the DOM. In styled mode, this method is not used, instead use defs and filters.

Parameters:
Name Type Argument Description
shadowOptions boolean | Highcharts.ShadowOptionsObject

The shadow options. If true, the default options are applied. If false, the current shadow will be removed.

group Highcharts.SVGElement <optional>

The SVG group element where the shadows will be applied. The default is to add it to the same parent as the current element. Internally, this is ised for pie slices, where all the shadows are added to an element behind all the slices.

cutOff boolean <optional>

Used internally for column shadows.

Inherited From:
Overrides:
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>
false

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:
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:
Returns:
number .

The stroke width in pixels. Even if the given stroke widtch (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:
Returns:
Highcharts.SVGElement .

Returns the SVGElement for chaining.

Try it

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:

update(subtitleOptions)

Modify options for the subtitle.

Parameters:
Name Type Description
subtitleOptions Highcharts.SubtitleOptions

Options to modify.