Class: Chart

let chart = Highcharts.chart('container', {
       title: {
              text: 'My chart'
       },
       series: [{
           data: [1, 3, 2, 4]
       }]
})

Members

axes :Array.<Highcharts.Axis>

All the axes in the chart.

Type:

• Array.<Highcharts.Axis>

See also:

• Highcharts.Chart.xAxis
• Highcharts.Chart.yAxis

chartHeight :number

The current pixel height of the chart.

Type:

• number

chartWidth :number

The current pixel width of the chart.

Type:

• number

container :Highcharts.HTMLDOMElement

The containing HTML element of the chart. The container is dynamically inserted into the element given as the renderTo parameter in the Highcharts#chart constructor.

Type:

• Highcharts.HTMLDOMElement

credits :Highcharts.SVGElement

The chart's credits label. The label has an update method that allows setting new options as per the credits options set.

Type:

• Highcharts.SVGElement

data :Highcharts.Data|undefined

The data parser for this chart.

Type:

• Highcharts.Data | undefined

fullscreen :Highcharts.Fullscreen

Type:

• Highcharts.Fullscreen

hoverPoint :Highcharts.Point|null

Contains the original hovered point.

Type:

• Highcharts.Point | null

hoverPoints :Array.<Highcharts.Point>|null

Contains all hovered points.

Type:

• Array.<Highcharts.Point> | null

hoverSeries :Highcharts.Series|null

Contains the original hovered series.

Type:

• Highcharts.Series | null

<readonly> index :number

Index position of the chart in the Highcharts#charts property.

Type:

• number

inverted :boolean|undefined

The flag is set to true if a series of the chart is inverted.

Type:

• boolean | undefined

legend :Highcharts.Legend

The legend contains an interactive overview over chart items, usually individual series or points depending on the series type. The color axis and bubble legend are also rendered in the chart legend.

Type:

• Highcharts.Legend

numberFormatter :Highcharts.NumberFormatterCallbackFunction

Callback function to override the default function that formats all the numbers in the chart. Returns a string with the formatted number.

Type:

• Highcharts.NumberFormatterCallbackFunction

options :Highcharts.Options

The options structure for the chart after merging #defaultOptions and #userOptions. It contains members for the sub elements like series, legend, tooltip etc.

Type:

• Highcharts.Options

plotHeight :number

The current height of the plot area in pixels.

Type:

• number

plotLeft :number

The current left position of the plot area in pixels.

Type:

• number

plotTop :number

The current top position of the plot area in pixels.

Type:

• number

plotWidth :number

The current width of the plot area in pixels.

Type:

• number

pointer :Highcharts.Pointer

The Pointer that keeps track of mouse and touch interaction.

Type:

• Highcharts.Pointer

renderer :Highcharts.SVGRenderer

The renderer instance of the chart. Each chart instance has only one associated renderer.

Type:

• Highcharts.SVGRenderer

series :Array.<Highcharts.Series>

All the current series in the chart.

Type:

• Array.<Highcharts.Series>

sonification :Highcharts.Sonification|undefined

Sonification capabilities for the chart.

Type:

• Highcharts.Sonification | undefined

styledMode :boolean

Whether the chart is in styled mode, meaning all presentational attributes are avoided.

Type:

• boolean

subtitle :Highcharts.SubtitleObject

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

Type:

• Highcharts.SubtitleObject

time :Highcharts.Time

The Time object associated with the chart. Since v6.0.5, time settings can be applied individually for each chart. If no individual settings apply, the Time object is shared by all instances.

Type:

• Highcharts.Time

title :Highcharts.TitleObject

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

Type:

• Highcharts.TitleObject

Try it

• Updating titles.

tooltip :Highcharts.Tooltip

Tooltip object for points of series.

Type:

• Highcharts.Tooltip

userOptions :Highcharts.Options

The original options given to the constructor or a chart factory like Highcharts.chart and Highcharts.stockChart. The original options are shallow copied to avoid mutation. The copy, chart.userOptions, may later be mutated to reflect updated options throughout the lifetime of the chart.

For collections, like series, xAxis and yAxis, the chart user options should always be reflected by the item user option, so for example the following should always be true:

chart.xAxis[0].userOptions === chart.userOptions.xAxis[0]

Type:

• Highcharts.Options

xAxis :Array.<Highcharts.Axis>

A collection of the X axes in the chart.

Type:

• Array.<Highcharts.Axis>

yAxis :Array.<Highcharts.Axis>

A collection of the Y axes in the chart.

Type:

• Array.<Highcharts.Axis>

To Do:

• Make events official: Fire the event `afterInit`.

Methods

addAnnotation(options [, redraw])

Add an annotation to the chart after render time.

Parameters:

Name	Type	Argument	Description
options	Highcharts.AnnotationsOptions		The annotation options for the new, detailed annotation.
redraw	boolean	<optional>

Returns:

Highcharts.Annotation .

The newly generated annotation.

Try it

• Add annotation.

addAxis(options [, isX] [, redraw] [, animation])

Add an axis to the chart after render time. Note that this method should never be used when adding data synchronously at chart render time, as it adds expense to the calculations and rendering. When adding data at the same time as the chart is initialized, add the axis as a configuration option instead.

Parameters:

Name	Type	Argument	Default	Description
options	Highcharts.AxisOptions			The axis options.
isX	boolean	<optional>	false	Whether it is an X axis or a value axis.
redraw	boolean	<optional>	true	Whether to redraw the chart after adding.
animation	boolean | Partial.<Highcharts.AnimationOptionsObject>	<optional>		Whether and how to apply animation in the redraw. When undefined, it applies the animation that is set in the chart.animation option.

Returns:

Highcharts.Axis .

The newly generated Axis object.

Try it

• Add and remove axes.

addColorAxis(options [, redraw] [, animation])

Add a color axis to the chart after render time. Note that this method should never be used when adding data synchronously at chart render time, as it adds expense to the calculations and rendering. When adding data at the same time as the chart is initialized, add the axis as a configuration option instead.

Parameters:

Name	Type	Argument	Default	Description
options	Highcharts.ColorAxisOptions			The axis options.
redraw	boolean	<optional>	true	Whether to redraw the chart after adding.
animation	boolean | Partial.<Highcharts.AnimationOptionsObject>	<optional>		Whether and how to apply animation in the redraw. When undefined, it applies the animation that is set in the chart.animation option.

Returns:

Highcharts.Axis .

The newly generated Axis object.

Try it

• Add and remove axes.

addCredits( [credits])

Set a new credits label for the chart.

Parameters:

Name	Type	Argument	Description
credits	Highcharts.CreditsOptions	<optional>	A configuration object for the new credits.

Try it

• Add and update credits.

addSeries(options [, redraw] [, animation])

Add a series to the chart after render time. Note that this method should never be used when adding data synchronously at chart render time, as it adds expense to the calculations and rendering. When adding data at the same time as the chart is initialized, add the series as a configuration option instead. With multiple axes, the offset is dynamically adjusted.

Parameters:

Name	Type	Argument	Default	Description
options	Highcharts.SeriesOptionsType			The config options for the series.
redraw	boolean	<optional>	true	Whether to redraw the chart after adding.
animation	boolean | Partial.<Highcharts.AnimationOptionsObject>	<optional>		Whether to apply animation, and optionally animation configuration. When undefined, it applies the animation that is set in the chart.animation option.

Fires:

• Highcharts.Chart#event:addSeries
• Highcharts.Chart#event:afterAddSeries

Returns:

Highcharts.Series .

The newly created series object.

Try it

• Add a series from a button.
• Add a series in Highcharts Stock.

addSeriesAsDrilldown(point, options)

Add a series to the chart as drilldown from a specific point in the parent series. This method is used for async drilldown, when clicking a point in a series should result in loading and displaying a more high-resolution series. When not async, the setup is simpler using the drilldown.series options structure.

Parameters:

Name	Type	Description
point	Highcharts.Point	The point from which the drilldown will start.
options	Highcharts.SeriesOptionsType	The series options for the new, detailed series.

Try it

• Async drilldown.

destroy()

Remove the chart and purge memory. This method is called internally before adding a second chart into the same container, as well as on window unload to prevent leaks.

Fires:

• Highcharts.Chart#event:destroy

Try it

• Destroy the chart from a button.
• Destroy with Highcharts Stock.

downloadCSV()

Generates a data URL of CSV for local download in the browser. This is the default action for a click on the 'Download CSV' button.

See Highcharts.Chart#getCSV to get the CSV data itself.

Requires:

• module:modules/exporting

downloadXLS()

Generates a data URL of an XLS document for local download in the browser. This is the default action for a click on the 'Download XLS' button.

See Highcharts.Chart#getTable to get the table data itself.

Requires:

• module:modules/exporting

drillUp()

When the chart is drilled down to a child series, calling chart.drillUp() will drill up to the parent series.

Requires:

• module:modules/drilldown

Try it

• highcharts/drilldown/programmatic Programmatic drilldown.

exportChart(exportingOptions, chartOptions)

Exporting module required. Submit an SVG version of the chart to a server along with some parameters for conversion.

Parameters:

Name	Type	Description
exportingOptions	Highcharts.ExportingOptions	Exporting options in addition to those defined in exporting.
chartOptions	Highcharts.Options	Additional chart options for the exported chart. For example a different background color can be added here, or dataLabels for export only.

Requires:

• module:modules/exporting

Try it

• Export with no options.
• PDF type and custom filename.
• Different chart background in export.
• Export with Highcharts Stock.

exportChartLocal( [exportingOptions] [, chartOptions])

Exporting and offline-exporting modules required. Export a chart to an image locally in the user's browser.

Parameters:

Name	Type	Argument	Description
exportingOptions	Highcharts.ExportingOptions	<optional>	Exporting options, the same as in Highcharts.Chart#exportChart.
chartOptions	Highcharts.Options	<optional>	Additional chart options for the exported chart. For example a different background color can be added here, or dataLabels for export only.

Requires:

• module:modules/exporting
• module:modules/offline-exporting

fromLatLonToPoint(lonLat)

Deprecated. Use MapView.lonLatToProjectedUnits instead.

Parameters:

Name	Type	Description
lonLat	Highcharts.MapLonLatObject	Coordinates.

Deprecated:

• Yes

Requires:

• module:modules/map

Returns:

Highcharts.ProjectedXY .

X and Y coordinates in terms of projected values

fromPointToLatLon(point)

Deprecated. Use MapView.projectedUnitsToLonLat instead.

Parameters:

Name	Type	Description
point	Highcharts.Point | Highcharts.ProjectedXY	A Point instance or anything containing x and y properties with numeric values.

Deprecated:

• Yes

Requires:

• module:modules/map

Returns:

Highcharts.MapLonLatObject | undefined .

An object with lat and lon properties.

get(id)

Get an axis, series or point object by id as given in the configuration options. Returns undefined if no item is found.

Parameters:

Name	Type	Description
id	string	The id as given in the configuration options.

Returns:

Highcharts.Axis | Highcharts.Series | Highcharts.Point | undefined .

The retrieved item.

Try it

• Get series by id.

getCSV( [useLocalDecimalPoint])

Export-data module required. Returns the current chart data as a CSV string.

Parameters:

Name	Type	Argument	Description
useLocalDecimalPoint	boolean	<optional>	Whether to use the local decimal point as detected from the browser. This makes it easier to export data to Excel in the same locale as the user is.

Returns:

string .

CSV representation of the data

getChartHTML()

Return the unfiltered innerHTML of the chart container. Used as hook for plugins. In styled mode, it also takes care of inlining CSS style rules.

See also:

• Highcharts.Chart#getSVG

Requires:

• module:modules/exporting

Returns:

string .

The unfiltered SVG of the chart.

getDataRows( [multiLevelHeaders])

Export-data module required. Returns a two-dimensional array containing the current chart data.

Parameters:

Name	Type	Argument	Description
multiLevelHeaders	boolean	<optional>	Use multilevel headers for the rows by default. Adds an extra row with top level headers. If a custom columnHeaderFormatter is defined, this can override the behavior.

Fires:

• Highcharts.Chart#event:exportData

Returns:

Array.<Array.<(number|string)>> .

The current chart data

getFilename()

Get the default file name used for exported charts. By default it creates a file name based on the chart title.

Requires:

• module:modules/exporting

Returns:

string .

A file name without extension.

getOptions()

Return the current options of the chart, but only those that differ from default options. Items that can be either an object or an array of objects, like series, xAxis and yAxis, are always returned as array.

Since:

• 11.1.0

Try it

• View live demo.

getSVG( [chartOptions])

Return an SVG representation of the chart.

Parameters:

Name	Type	Argument	Description
chartOptions	Highcharts.Options	<optional>	Additional chart options for the generated SVG representation. For collections like xAxis, yAxis or series, the additional options is either merged in to the original item of the same id, or to the first item if a common id is not found.

Requires:

• module:modules/exporting

Fires:

• Highcharts.Chart#event:getSVG

Returns:

string .

The SVG representation of the rendered chart.

Try it

• View the SVG from a button.

getSelectedPoints()

Returns an array of all currently selected points in the chart. Points can be selected by clicking or programmatically by the Highcharts.Point#select function.

Returns:

Array.<Highcharts.Point> .

The currently selected points.

Try it

• Get selected points.
• Lasso selection.
• Rectangle selection.

getSelectedSeries()

Returns an array of all currently selected series in the chart. Series can be selected either programmatically by the Highcharts.Series#select function or by checking the checkbox next to the legend item if series.showCheckBox is true.

Returns:

Array.<Highcharts.Series> .

The currently selected series.

Try it

• Get selected series.

getTable( [useLocalDecimalPoint])

Export-data module required. Build a HTML table with the chart's current data.

Parameters:

Name	Type	Argument	Description
useLocalDecimalPoint	boolean	<optional>	Whether to use the local decimal point as detected from the browser. This makes it easier to export data to Excel in the same locale as the user is.

Fires:

• Highcharts.Chart#event:afterGetTable

Returns:

string .

HTML representation of the data.

Try it

• View the data from the export menu.

hideData()

Export-data module required. Hide the data table when visible.

hideLoading()

Hide the loading layer.

See also:

• Highcharts.Chart#showLoading

Try it

• Show and hide loading from a button.
• Toggle loading in Highcharts Stock.

init(userOptions [, callback])

Overridable function that initializes the chart. The constructor's arguments are passed on directly.

Parameters:

Name	Type	Argument	Description
userOptions	Highcharts.Options		Custom options.
callback	function	<optional>	Function to run when the chart has loaded and all external images are loaded.

Fires:

• Highcharts.Chart#event:init
• Highcharts.Chart#event:afterInit

isInsidePlot(plotX, plotY [, options])

Check whether a given point is within the plot area.

Parameters:

Name	Type	Argument	Description
plotX	number		Pixel x relative to the plot area.
plotY	number		Pixel y relative to the plot area.
options	Highcharts.ChartIsInsideOptionsObject	<optional>	Options object.

Returns:

boolean .

Returns true if the given point is inside the plot area.

langFormat(langKey, context)

Apply context to a format string from lang options of the chart.

Parameters:

Name	Type	Description
langKey	string	Key (using dot notation) into lang option structure.
context	Highcharts.Dictionary.<*>	Context to apply to the format string.

Requires:

• module:modules/accessibility

Returns:

string .

The formatted string.

mapZoom( [howMuch] [, xProjected] [, yProjected] [, chartX] [, chartY])

Highcharts Maps only. Zoom in or out of the map. See also Highcharts.Point#zoomTo. See Highcharts.Chart#fromLatLonToPoint for how to get the centerX and centerY parameters for a geographic location.

Deprecated as of v9.3 in favor of MapView.zoomBy.

Parameters:

Name	Type	Argument	Description
howMuch	number	<optional>	How much to zoom the map. Values less than 1 zooms in. 0.5 zooms in to half the current view. 2 zooms to twice the current view. If omitted, the zoom is reset.
xProjected	number	<optional>	The projected x position to keep stationary when zooming, if available space.
yProjected	number	<optional>	The projected y position to keep stationary when zooming, if available space.
chartX	number	<optional>	Keep this chart position stationary if possible. This is used for example in mousewheel events, where the area under the mouse should be fixed as we zoom in.
chartY	number	<optional>	Keep this chart position stationary if possible.

Deprecated:

• Yes

print()

Exporting module required. Clears away other elements in the page and prints the chart as it is displayed. By default, when the exporting module is enabled, a context button with a drop down menu in the upper right corner accesses this function.

Requires:

• module:modules/exporting

Fires:

• Highcharts.Chart#event:beforePrint
• Highcharts.Chart#event:afterPrint

Try it

• Print from a HTML button.

redraw( [animation])

Redraw the chart after changes have been done to the data, axis extremes chart size or chart elements. All methods for updating axes, series or points have a parameter for redrawing the chart. This is true by default. But in many cases you want to do more than one operation on the chart before redrawing, for example add a number of points. In those cases it is a waste of resources to redraw the chart for each new point added. So you add the points and call chart.redraw() after.

Parameters:

Name	Type	Argument	Description
animation	boolean | Partial.<Highcharts.AnimationOptionsObject>	<optional>	If or how to apply animation to the redraw. When undefined, it applies the animation that is set in the chart.animation option.

Fires:

• Highcharts.Chart#event:afterSetExtremes
• Highcharts.Chart#event:beforeRedraw
• Highcharts.Chart#event:predraw
• Highcharts.Chart#event:redraw
• Highcharts.Chart#event:render
• Highcharts.Chart#event:updatedData

reflow( [e])

Reflows the chart to its container. By default, the Resize Observer is attached to the chart's div which allows to reflows the chart automatically to its container, as per the chart.reflow option.

Parameters:

Name	Type	Argument	Description
e	global.Event	<optional>	Event arguments. Used primarily when the function is called internally as a response to window resize.

Try it

• Pop up and reflow.

removeAnnotation(idOrAnnotation)

Remove an annotation from the chart.

Parameters:

Name	Type	Description
idOrAnnotation	number | string | Highcharts.Annotation	The annotation's id or direct annotation object.

setCaption(options)

Set the caption options. This can also be done from Highcharts.Chart#update.

Parameters:

Name	Type	Description
options	Highcharts.CaptionOptions	New caption options. The caption text itself is set by the options.text property.

setClassName( [className])

Set the chart container's class name, in addition to highcharts-container.

Parameters:

Name	Type	Argument	Description
className	string	<optional>	The additional class name.

setSize( [width] [, height] [, animation])

Resize the chart to a given width and height. In order to set the width only, the height argument may be skipped. To set the height only, pass undefined for the width.

Parameters:

Name	Type	Argument	Description
width	number | null	<optional>	The new pixel width of the chart. Since v4.2.6, the argument can be undefined in order to preserve the current value (when setting height only), or null to adapt to the width of the containing element.
height	number | null	<optional>	The new pixel height of the chart. Since v4.2.6, the argument can be undefined in order to preserve the current value, or null in order to adapt to the height of the containing element.
animation	boolean | Partial.<Highcharts.AnimationOptionsObject>	<optional>	Whether and how to apply animation. When undefined, it applies the animation that is set in the chart.animation option.

Fires:

• Highcharts.Chart#event:endResize
• Highcharts.Chart#event:resize

Try it

• Test resizing from buttons.
• Add a jQuery UI resizable.
• Highcharts Stock with UI resizable.

setSubtitle(options)

Shortcut to set the subtitle options. This can also be done from Highcharts.Chart#update or Highcharts.Chart#setTitle.

Parameters:

Name	Type	Description
options	Highcharts.SubtitleOptions	New subtitle options. The subtitle text itself is set by the options.text property.

setTitle( [titleOptions] [, subtitleOptions] [, redraw])

Set a new title or subtitle for the chart.

Parameters:

Name	Type	Argument	Description
titleOptions	Highcharts.TitleOptions	<optional>	New title options. The title text itself is set by the titleOptions.text property.
subtitleOptions	Highcharts.SubtitleOptions	<optional>	New subtitle options. The subtitle text itself is set by the subtitleOptions.text property.
redraw	boolean	<optional>	Whether to redraw the chart or wait for a later call to chart.redraw().

Try it

• Set title text and styles.

showLoading( [str])

Dim the chart and show a loading text or symbol. Options for the loading screen are defined in the loading options.

Parameters:

Name	Type	Argument	Description
str	string	<optional>	An optional text to show in the loading label instead of the default one. The default text is set in lang.loading.

Try it

• Show and hide loading from a button.
• Apply different text labels.
• Toggle loading in Highcharts Stock.

showResetZoom()

Display the zoom button, so users can reset zoom to the default view settings.

Fires:

• Highcharts.Chart#event:afterShowResetZoom
• Highcharts.Chart#event:beforeShowResetZoom

sonify( [onEnd])

Play a sonification of a chart.

Parameters:

Name	Type	Argument	Description
onEnd	Highcharts.SonificationChartEventCallback	<optional>	Callback to call after play completed

Requires:

• module:modules/sonification

toggleSonify( [reset] [, onEnd])

Play/pause sonification of a chart.

Parameters:

Name	Type	Argument	Description
reset	boolean	<optional>	Reset the playing cursor after play completed. Defaults to true.
onEnd	Highcharts.SonificationChartEventCallback	<optional>	Callback to call after play completed

Requires:

• module:modules/sonification

transformFromLatLon(latLon, transform)

Highcharts Maps only. Get point from latitude and longitude using specified transform definition.

Parameters:

Name	Type	Description
latLon	Highcharts.MapLonLatObject	A latitude/longitude object.
transform	*	The transform definition to use as explained in the documentation.

Requires:

• module:modules/map

Returns:

ProjectedXY .

An object with x and y properties.

Try it

• Use specific transformation for lat/lon.

transformToLatLon(point, transform)

Highcharts Maps only. Get latLon from point using specified transform definition. The method returns an object with the numeric properties lat and lon.

Parameters:

Name	Type	Description
point	Highcharts.Point | Highcharts.ProjectedXY	A Point instance, or any object containing the properties x and y with numeric values.
transform	*	The transform definition to use as explained in the documentation.

Requires:

• module:modules/map

Returns:

Highcharts.MapLonLatObject | undefined .

An object with lat and lon properties.

Try it

• Use specific transformation for lat/lon.

update(options [, redraw] [, oneToOne] [, animation])

A generic function to update any element of the chart. Elements can be enabled and disabled, moved, re-styled, re-formatted etc.

A special case is configuration objects that take arrays, for example xAxis, yAxis or series. For these collections, an id option is used to map the new option set to an existing object. If an existing object of the same id is not found, the corresponding item is updated. So for example, running chart.update with a series item without an id, will cause the existing chart's series with the same index in the series array to be updated. When the oneToOne parameter is true, chart.update will also take care of adding and removing items from the collection. Read more under the parameter description below.

Note that when changing series data, chart.update may mutate the passed data options.

See also the responsive option set. Switching between responsive.rules basically runs chart.update under the hood.

Parameters:

Name	Type	Argument	Default	Description
options	Highcharts.Options			A configuration object for the new chart options.
redraw	boolean	<optional>	true	Whether to redraw the chart.
oneToOne	boolean	<optional>	false	When true, the series, xAxis, yAxis and annotations collections will be updated one to one, and items will be either added or removed to match the new updated options. For example, if the chart has two series and we call chart.update with a configuration containing three series, one will be added. If we call chart.update with one series, one will be removed. Setting an empty series array will remove all series, but leaving out theseries property will leave all series untouched. If the series have id's, the new series options will be matched by id, and the remaining ones removed.
animation	boolean | Partial.<Highcharts.AnimationOptionsObject>	<optional>		Whether to apply animation, and optionally animation configuration. When undefined, it applies the animation that is set in the chart.animation option.

Fires:

• Highcharts.Chart#event:update
• Highcharts.Chart#event:afterUpdate

Try it

• Update chart geometry.

viewData()

Export-data module required. View the data in a table below the chart.

Fires:

• Highcharts.Chart#event:afterViewData

zoomOut()

Zoom the chart out after a user has zoomed in. See also Axis.setExtremes.

Fires:

• Highcharts.Chart#event:selection