new Chart( [renderTo], options [, callback])
The Chart class. The recommended constructor is Highcharts#chart.
Parameters:
Name | Type | Argument | Description |
---|---|---|---|
renderTo |
string | Highcharts.HTMLDOMElement |
<optional> |
The DOM element to render to, or its id. |
options |
Highcharts.Options | The chart options structure. |
|
callback |
Highcharts.ChartCallbackFunction |
<optional> |
Function to run when the chart has loaded and and all external images are loaded. Defining a chart.events.load handler is equivalent. |
Example
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:
-
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:
-
data :Highcharts.Data|undefined
-
The data parser for this chart.
Type:
- Highcharts.Data | undefined
-
fullscreen :Highcharts.Fullscreen
-
Type:
-
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 overview of the chart's series.
Type:
-
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:
-
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:
-
renderer :Highcharts.SVGRenderer
-
The renderer instance of the chart. Each chart instance has only one associated renderer.
Type:
-
series :Array.<Highcharts.Series>
-
All the current series in the chart.
Type:
- Array.<Highcharts.Series>
-
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 viachart.update
.Type:
-
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, theTime
object is shared by all instances.Type:
-
title :Highcharts.TitleObject
-
The chart title. The title has an
update
method that allows modifying the options directly or indirectly viachart.update
.Type:
Try it
-
tooltip :Highcharts.Tooltip
-
Tooltip object for points of series.
Type:
-
userOptions :Highcharts.Options
-
The original options given to the constructor or a chart factory like Highcharts.chart and Highcharts.stockChart.
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
-
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>
true Whether and how to apply animation in the redraw.
Returns:
Highcharts.Axis .The newly generated Axis object.
Try it
-
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>
true Whether and how to apply animation in the redraw.
Returns:
Highcharts.ColorAxis .The newly generated Axis object.
Try it
-
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
-
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.
Fires:
- Highcharts.Chart#event:addSeries
- Highcharts.Chart#event:afterAddSeries
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
Highcharts.SeriesOptionsType The series options for the new, detailed series.
Try it
-
cancelSonify( [fadeOut])
-
Cancel current sonification and reset cursor.
Parameters:
Name Type Argument Default Description fadeOut
boolean <optional>
true Fade out as we pause to avoid clicks.
Requires:
- module:modules/sonification
Returns:
-
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
-
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
-
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
-
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 containingx
andy
properties with numeric values.- Deprecated:
-
- Yes
Requires:
- module:modules/map
Returns:
-
get(id)
-
Get an axis, series or point object by
id
as given in the configuration options. Returnsundefined
if no item is found.Parameters:
Name Type Description id
string The id as given in the configuration options.
Returns:
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:
Requires:
- module:modules/exporting
Returns:
string .The unfiltered SVG of the chart.
-
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
-
getCurrentSonifyPoints()
-
Get a list of the points currently under cursor.
Requires:
- module:modules/sonification
Returns:
Array.<Highcharts.Point> .The points currently under the cursor.
-
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.
-
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 Argument Description chartOptions
Highcharts.Options <optional>
Additional chart options for the generated SVG representation. For collections like
xAxis
,yAxis
orseries
, the additional options is either merged in to the original item of the sameid
, 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
-
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
-
hideData()
-
Export-data module required. Hide the data table when visible.
-
hideLoading()
-
Hide the loading layer.
- See also:
Try it
-
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 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
andcenterY
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
-
pauseSonify( [fadeOut])
-
Pause the running sonification.
Parameters:
Name Type Argument Default Description fadeOut
boolean <optional>
true Fade out as we pause to avoid clicks.
Requires:
- module:modules/sonification
Returns:
-
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
-
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 callchart.redraw()
after.Parameters:
Name Type Argument Description animation
boolean | Partial.<Highcharts.AnimationOptionsObject> <optional>
If or how to apply animation to the redraw.
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 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 Argument Description e
global.Event <optional>
Event arguments. Used primarily when the function is called internally as a response to window resize.
Try it
-
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.
-
resetSonifyCursor()
-
Reset cursor to start. Requires series.sonify or chart.sonify to have been played at some point earlier.
Requires:
- module:modules/sonification
Returns:
-
resetSonifyCursorEnd()
-
Reset cursor to end. Requires series.sonify or chart.sonify to have been played at some point earlier.
Requires:
- module:modules/sonification
Returns:
-
resumeSonify(onEnd)
-
Resume the currently running sonification. Requires series.sonify or chart.sonify to have been played at some point earlier.
Parameters:
Name Type Description onEnd
function Callback to call when play finished.
Requires:
- module:modules/sonification
Returns:
-
rewindSonify(onEnd)
-
Play backwards from cursor. Requires series.sonify or chart.sonify to have been played at some point earlier.
Parameters:
Name Type Description onEnd
function Callback to call when play finished.
Requires:
- module:modules/sonification
Returns:
-
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 Default 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), ornull
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, ornull
in order to adapt to the height of the containing element.animation
boolean | Partial.<Highcharts.AnimationOptionsObject> <optional>
true Whether and how to apply animation.
Fires:
- Highcharts.Chart#event:endResize
- Highcharts.Chart#event:resize
Try it
-
setSonifyCursor(points)
-
Set the cursor to a point or set of points in different series.
Parameters:
Name Type Description points
Highcharts.Point | Array.<Highcharts.Point> The point or points to set the cursor to. If setting multiple points under the cursor, the points have to be in different series that are being played simultaneously.
Requires:
- module:modules/sonification
-
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
-
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
-
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( [options])
-
Sonify a chart.
Parameters:
Name Type Argument Description options
Highcharts.SonificationOptions <optional>
The options for sonifying this chart. If not provided, uses options set on chart and series.
Requires:
- module:modules/sonification
Try it
-
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
andy
properties.Try it
-
transformToLatLon(point, transform)
-
Highcharts Maps only. Get latLon from point using specified transform definition. The method returns an object with the numeric properties
lat
andlon
.Parameters:
Name Type Description point
Highcharts.Point | Highcharts.ProjectedXY A
Point
instance, or any object containing the propertiesx
andy
with numeric values.transform
* The transform definition to use as explained in the documentation.
Requires:
- module:modules/map
Returns:
Try it
-
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, runningchart.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 theoneToOne
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 runschart.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
, theseries
,xAxis
,yAxis
andannotations
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 callchart.update
with a configuration containing three series, one will be added. If we callchart.update
with one series, one will be removed. Setting an emptyseries
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>
true Whether to apply animation, and optionally animation configuration.
Fires:
- Highcharts.Chart#event:update
- Highcharts.Chart#event:afterUpdate
Try it
-
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