# 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 | Highcharts.HTMLDOMElement | <optional> | The DOM element to render to, or its id.
  `options` | Highcharts.Options |  | The chart options structure.
  `callback` | Highcharts.ChartCallbackFunction | true | <optional> | Function to run when the chart has loaded and all external images are loaded. Defining a chart.events.load handler is equivalent. Set to `true` to return a promise that resolves when the chart is ready.

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

  - 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

#### exporting :Highcharts.Exporting

  Exporting object.

  ##### Type:

  - Highcharts.Exporting

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

  ##### Requires:

  - module:modules/drilldown

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

#### 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

  - Programmatic drilldown.

#### fromLatLonToPoint(lonLat)

  Deprecated. Use `MapView.lonLatToProjectedUnits` instead.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `lonLat` | Highcharts.MapLonLatObject | Coordinates.

  Deprecated:
    - 10.0.0

  ##### 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:
    - 10.0.0

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

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

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

#### 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 | true | <optional> | Function to run when the chart has loaded and all external images are loaded. Set to `true` to return a promise that resolves when the chart is ready.

  ##### 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:
    - 9.3.0

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

  If the given options don't differ from the current chart options, the update is skipped and the `afterUpdate` event is not emitted.

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

#### zoomOut()

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

  ##### Fires:

  - Highcharts.Chart#event:selection