Class: Chart

Highcharts. Chart

new Chart(renderTo, options [, callback])

The Chart class. The recommended constructor is Highcharts#chart.

Parameters:
Name Type Argument Description
renderTo String | HTMLDOMElement

The DOM element to render to, or its id.

options Options

The chart options structure.

callback function <optional>

Function to run when the chart has loaded and and all external images are loaded. Defining a chart.event.load handler is equivalent.

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

Members

<static> axes :Array.<Highcharts.Axis>

All the axes in the chart.

Type:
See also:

<static> chartHeight :Number

The current pixel height of the chart.

Type:
  • Number

<static> chartWidth :Number

The current pixel width of the chart.

Type:
  • Number

<static> container :HTMLDOMElement

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

Type:

<static> 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:

<static> options :Options

The options structure for the chart. It contains members for the sub elements like series, legend, tooltip etc.

Type:
  • Options

<static> plotHeight :Number

The current height of the plot area in pixels.

Type:
  • Number

<static> plotLeft :Number

The current left position of the plot area in pixels.

Type:
  • Number

<static> plotTop :Number

The current top position of the plot area in pixels.

Type:
  • Number

<static> plotWidth :Number

The current width of the plot area in pixels.

Type:
  • Number

<static> pointer :Highcharts.Pointer

The Pointer that keeps track of mouse and touch interaction.

Type:

<static> renderer :Highcharts.SVGRenderer

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

Type:

<static> series :Array.<Highcharts.Series>

All the current series in the chart.

Type:

<static> subtitle :Object

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

Type:
  • Object

<static> title :Object

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

Type:
  • Object
Try it

<static> xAxis :Array.<Highcharts.Axis>

A collection of the X axes in the chart.

Type:

<static> yAxis :Array.<Highcharts.Axis>

A collection of the Y axes in the chart.

Type:

propsRequireDirtyBox

These properties cause isDirtyBox to be set to true when updating. Can be extended from plugins.

propsRequireUpdateSeries

These properties cause all series to be updated when updating. Can be extended from plugins.

Methods

<static> drillUp()

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

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 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 AnimationOptions <optional>
true

Whether and how to apply animation in the redraw.

Returns:
Highcharts.Axis .

The newly generated Axis object.

Try it

addCredits(options)

Set a new credits label for the chart.

Parameters:
Name Type Description
options CreditOptions

A configuration object for the new credits.

Try it

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 SeriesOptions

The config options for the series.

redraw Boolean <optional>
true

Whether to redraw the chart after adding.

animation AnimationOptions

Whether to apply animation, and optionally animation configuration.

Returns:
Highcharts.Series .

The newly created series object.

Try it

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 SeriesOptions

The series options for the new, detailed series.

Try it

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.

Try it

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 Object

Exporting options in addition to those defined in exporting.

Properties
Name Type Description
filename String

The file name for the export without extension.

url String

The URL for the server module to do the conversion.

width Number

The width of the PNG or JPG image generated on the server.

type String

The MIME type of the converted image.

sourceWidth Number

The pixel width of the source (in-page) chart.

sourceHeight Number

The pixel height of the source (in-page) chart.

chartOptions Options

Additional chart options for the exported chart. For example a different background color can be added here, or dataLabels for export only.

Try it

exportChartLocal(exportingOptions, chartOptions)

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

Parameters:
Name Type Description
exportingOptions Object

Exporting options, the same as in Highcharts.Chart#exportChart.

chartOptions Options

Additional chart options for the exported chart. For example a different background color can be added here, or dataLabels for export only.

fromLatLonToPoint(latLon)

Highmaps only. Get chart coordinates from latitude/longitude. Returns an object with x and y values corresponding to the xAxis and yAxis.

Parameters:
Name Type Description
latLon Object

Coordinates.

Properties
Name Type Description
lat Number

The latitude.

lon Number

The longitude.

Returns:
Object .

X and Y coordinates in terms of chart axis values.

Try it

fromPointToLatLon(point)

Highmaps only. Calculate latitude/longitude values for a point. Returns an object with the numeric properties lat and lon.

Parameters:
Name Type Description
point Highcharts.Point | Object

A Point instance or anything containing x and y properties with numeric values

Returns:
Object .

An object with lat and lon properties.

Try it

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

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

The unfiltered SVG of the chart.

getChartSize()

Internal function to get the chart width and height according to options and container size. Sets Highcharts.Chart.chartWidth and Highcharts.Chart.chartHeight.

getCSV(useLocalDecimalPoint)

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

Parameters:
Name Type Description
useLocalDecimalPoint Boolean

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

getDataRows()

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

Returns:
Array.<Array> .

The current chart data

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

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

getSVG(chartOptions)

Return an SVG representation of the chart.

Parameters:
Name Type Description
chartOptions Options

Additional chart options for the generated SVG representation. For collections like xAxis, yAxis or series, the additional options is either merged in to the orininal item of the same id, or to the first item if a common id is not found.

Returns:
String .

The SVG representation of the rendered chart.

Try it

getTable()

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

Returns:
String .

HTML representation of the data.

Try it

init()

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

isInsidePlot(plotX, plotY, inverted)

Check whether a given point is within the plot area.

Parameters:
Name Type Description
plotX Number

Pixel x relative to the plot area.

plotY Number

Pixel y relative to the plot area.

inverted Boolean

Whether the chart is inverted.

Returns:
Boolean .

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

mapZoom( [howMuch] [, centerX] [, centerY] [, mouseX] [, mouseY])

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

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.

centerX Number <optional>

The X axis position to center around if available space.

centerY Number <optional>

The Y axis position to center around if available space.

mouseX Number <optional>

Fix the zoom to this position if possible. This is used for example in mousewheel events, where the area under the mouse should be fixed as we zoom in.

mouseY Number <optional>

Fix the zoom to this position if possible.

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.

Try it

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 Description
animation AnimationOptions

If or how to apply animation to the redraw.

reflow(e)

Reflows the chart to its container. By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.

Parameters:
Name Type Description
e Object

Event arguments. Used primarily when the function is called internally as a response to window resize.

Try it

setClassName()

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

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 Default Description
width Number | undefined | 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 | undefined | 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 AnimationOptions <optional>
true

Whether and how to apply animation.

Try it

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 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 Description
titleOptions TitleOptions

New title options. The title text itself is set by the titleOptions.text property.

subtitleOptions SubtitleOptions

New subtitle options. The subtitle text itself is set by the subtitleOptions.text property.

redraw Boolean

Whether to redraw the chart or wait for a later call to chart.redraw().

Try it

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 Description
str String

An optional text to show in the loading label instead of the default one. The default text is set in lang.loading.

Try it

transformFromLatLon(latLon, transform)

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

Parameters:
Name Type Description
latLon Object

A latitude/longitude object.

Properties
Name Type Description
lat Number

The latitude.

lon Number

The longitude.

transform Object

The transform definition to use as explained in the documentation.

Returns:
Object .

An object with x and y properties.

Try it

transformToLatLon(point, transform)

Highmaps 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 | Object

A Point instance, or or any object containing the properties x and y with numeric values.

transform Object

The transform definition to use as explained in the documentation.

Returns:
Object .

An object with lat and lon properties.

Try it

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

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.

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

Parameters:
Name Type Argument Default Description
options 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 and yAxis 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 the series 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.

Try it

viewData()

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