Chart
Related Docs:
class Chart
| package config
When using multiple axis, the ticks of two or more opposite axes will automatically be aligned by adding ticks to the axis or axes with the least ticks, as if tickAmount were specified.. .
This can be prevented by setting alignTicks to false. If the grid lines look messy, it's a good idea to hide them for the secondary axis by setting gridLineWidth to 0.
Set the overall animation for all chart updating. Animation can be disabled throughout. the chart by setting it to false here. It can be overridden for each individual. API method as a function parameter. The only animation not affected by this option is the . initial series animation, see plotOptions.series.animation.. .
The animation can either be set as a boolean or a configuration object. If true,. it will use the 'swing' jQuery easing and a duration of 500 ms. If used as a configuration object,. the following properties are supported: . <dl>. <dt>duration</dt>.
Math object. See the easing demo.The background color or gradient for the outer chart area.
The color of the outer chart border.
The corner radius of the outer chart border.
The pixel width of the outer chart border.
A CSS class name to apply to the charts container div, allowing unique CSS styling for each chart.
In styled mode, this sets how many colors the class names should rotate between. With ten colors, series (or points) are given class names like highcharts-color-0, highcharts-color-0 [...] highcharts-color-9. The equivalent in non-styled mode is to set colors using the colors setting.
Alias of type.
A text description of the chart.. . If the Accessibility module is loaded, this is included by default as a long description of the chart and its contents in the hidden screen reader information region.
Event listeners for the chart.
An explicit height for the chart. If a number, the height is given in pixels. If given a percentage string (for example '56%'), the height is given as the percentage of the actual chart width. This allows for preserving the aspect ratio across responsive sizes.. .
By default (when null) the height is calculated from the offset height of the containing element, or 400 pixels if the containing element's height is 0.
If true, the axes will scale to the remaining visible series once one series is hidden. If false, hiding and showing a series will not affect the axes or the other series. For stacks, once one series within the stack is hidden, the rest of the stack will close in around it even if the axis is not affected.
Whether to invert the axes so that the x axis is vertical and y axis is horizontal. When true, the x axis is reversed by default. If a bar series is present in the chart, it will be inverted automatically.. . Inverting the chart doesn't have an effect if there are no cartesian series in the chart, or if the chart is polar.
The margin between the outer edge of the chart and the plot area. The numbers in the array designate top, right, bottom and left respectively. Use the options marginTop, marginRight, marginBottom and marginLeft for shorthand setting of one option. . .
By default there is no margin. The actual space is dynamically calculated from the offset of axis labels, axis title, title, subtitle and legend in addition to the spacingTop, spacingRight, spacingBottom and spacingLeft options.. Defaults to [null].
The margin between the bottom outer edge of the chart and the plot area. Use this to set a fixed. pixel value for the margin as opposed to the default dynamic margin. See also spacingBottom.
The margin between the left outer edge of the chart and the plot area. Use this to set a fixed. pixel value for the margin as opposed to the default dynamic margin. See also spacingLeft.
The margin between the right outer edge of the chart and the plot area. Use this to set a fixed. pixel value for the margin as opposed to the default dynamic margin. See also spacingRight.
The margin between the top outer edge of the chart and the plot area. Use this to set a fixed pixel value for the margin as opposed to the default dynamic margin. See also spacingTop.
Options to render charts in 3 dimensions. This feature requires highcharts-3d.js, found in the download package or online at code.highcharts.com/highcharts-3d.js.
Allows setting a key to switch between zooming and panning. Can be one of alt, ctrl, meta (the command key on Mac and Windows key on Windows) or shift. The keys are mapped directly to the key properties of the click event argument (event.altKey, event.ctrlKey, event.metaKey and event.shiftKey).
Allow panning in a chart. Best used with panKey to combine zooming and panning.. .
On touch devices, when the tooltip.followTouchMove option is true (default), panning requires two fingers. To allow panning with one finger, set followTouchMove to false.
Equivalent to zoomType, but for multitouch gestures only. By default, the pinchType is the same as the zoomType setting. However, pinching can be enabled separately in some cases, for example in stock charts where a mouse drag pans the chart, while pinching is enabled. When tooltip.followTouchMove is true, pinchType only applies to two-finger touches.
The background color or gradient for the plot area.
The URL for an image to use as the plot background. To set an image as the background for the entire chart, set a CSS background image to the container element. Note that for the image to be applied to exported charts, its URL needs to be accessible by the export server.
The color of the inner chart or plot area border.
The pixel width of the plot area border.
Whether to apply a drop shadow to the plot area. Requires that plotBackgroundColor be set. The shadow can be an object configuration containing color, offsetX, offsetY, opacity and width.
When true, cartesian charts like line, spline, area and column are transformed into the polar coordinate system. Requires highcharts-more.js.
Whether to reflow the chart to fit the width of the container div on resizing the window.
The HTML element where the chart will be rendered. If it is a string, the element by that id is used. The HTML element can also be passed by direct reference, or as the first argument of the chart constructor, in which case the option is not needed.
The button that appears after a selection zoom, allowing the user to reset zoom.
The background color of the marker square when selecting (zooming in on) an area of the chart.
Whether to apply a drop shadow to the outer chart area. Requires that . backgroundColor be set. The shadow can be an object configuration containing color, offsetX, offsetY, opacity and width.
Whether to show the axes initially. This only applies to empty charts where series are added dynamically, as axes are automatically added to cartesian series.
The distance between the outer edge of the chart and the content, like title or legend, or axis title or labels if present. The numbers in the array designate top, right, bottom and left respectively. Use the options spacingTop, spacingRight, spacingBottom and spacingLeft options for shorthand setting of one option.
The space between the bottom edge of the chart and the content (plot area, axis title and labels, title, subtitle or . legend in top position).
The space between the left edge of the chart and the content (plot area, axis title and labels, title, subtitle or . legend in top position).
The space between the right edge of the chart and the content (plot area, axis title and labels, title, subtitle or . legend in top position).
The space between the top edge of the chart and the content (plot area, axis title and labels, title, subtitle or . legend in top position).
Additional CSS styles to apply inline to the container div. Note that since the default font styles are applied in the renderer, it is ignorant of the individual chart options and must be set globally.
A text description of the chart type. . If the Accessibility module is loaded, this will be included in the description of the chart in the screen reader information region.. Highcharts will by default attempt to guess the chart type, but for more complex charts it is recommended to specify this property for clarity.
An explicit width for the chart. By default (when null) the width is calculated from the offset width of the containing element.
Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy.