Highcharts Options Reference
<< Go to the Highcharts home pageNavigate the structure by clicking plus and minus. Click the blue object names for details.
The options object
Methods and properties
chart
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.
Defaults to true
.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:
- duration
- The duration of the animation in milliseconds.
- easing
- When using jQuery as the general framework, the easing can be set to
linear
orswing
. More easing functions are available with the use of jQuery plug-ins, most notably the jQuery UI suite. See the jQuery docs. When using MooTools as the general framework, use the property nametransition
instead ofeasing
.
true
."#FFFFFF"
."#4572A7"
.5
.0
.div
, allowing unique CSS styling
for each chart.
Defaults to ""
.null
.true
.false
.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.
Since version 2.1, the margin is 0 by default. 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.
[null]
.spacingTop
.
Defaults to null
.spacingRight
.
Defaults to 50
.spacingBottom
.
Defaults to 70
.spacingLeft
.
Defaults to 80
.null
.null
."#C0C0C0"
.0
.false
.true
.null
.false
.false
.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).
Defaults to10
.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).
Defaults to10
.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).
Defaults to15
.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).
Defaults to10
.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. Defaults
to:
style: { fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font fontSize: '12px' }
"line"
.null
.x
, y
or xy
.
Defaults to ""
.chart.events
addSeries
method. The this
keyword refers to the
chart object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. Through event.options
you can access the series options that was passed to the addSeries
method. Returning false prevents the series from being added.
Fires when clicking on the plot background. The this
keyword refers to the
chart object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
Information on the clicked spot can be found through event.xAxis
and
event.yAxis
, which are arrays containing the axes of each dimension
and each axis' value at the clicked spot. The primary axes are event.xAxis[0]
and event.yAxis[0]
. Remember the unit of a datetime axis is milliseconds
since 1970-01-01 00:00:00.
click: function(e) { console.log( Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', e.xAxis[0].value), e.yAxis[0].value ) }
Fires when the chart is finished loading. The this
keyword refers to the
chart object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
From version 2.0.4, there is also a second parameter to Highcharts.Chart
where a callback function can be passed to be executed on chart.load.
redraw
option set to true.
The this
keyword refers to the
chart object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
Fires when an area of the chart has been selected. Selection is enabled by setting
the chart's zoomType. The this
keyword refers to the
chart object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. The default action for the
selection event is to zoom the
chart to the selected area. It can be prevented by calling
event.preventDefault()
.
Information on the selected area can be found through event.xAxis
and
event.yAxis
, which are arrays containing the axes of each dimension
and each axis' min and max values. The primary axes are event.xAxis[0]
and event.yAxis[0]
. Remember the unit of a datetime axis is milliseconds
since 1970-01-01 00:00:00.
selection: function(event) { // log the min and max of the primary, datetime x-axis console.log( Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', event.xAxis[0].min), Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', event.xAxis[0].max) ); // log the min and max of the y axis console.log(event.yAxis[0].min, event.yAxis[0].max); }
title
"center"
.false
.15
.text
to null
.
Defaults to "Chart title"
.align
,
x
and y
for text alignment. Defaults to:
{ color: '#3E576F', fontSize: '16px' }
"top"
.0
.15
.subtitle
"center"
.false
.""
.position: "absolute"
and
left and top properties. Defaults to:
{ color: '#3E576F' }
"top"
.0
.30
.xAxis
The X axis or category axis. Normally this is the horizontal axis, though if the chart is inverted this is the vertical axis. In case of multiple axes, the xAxis node is an array of configuration objects.
See the Axis object for programmatic access to the axis.
true
.null
.categories: ['Apples', 'Bananas', 'Oranges']Defaults to
[]
.{ second: '%H:%M:%S', minute: '%H:%M', hour: '%H:%M', day: '%e. %b', week: '%e. %b', month: '%b \'%y', year: '%Y' }
maxPadding
option to control the axis end.
Defaults to false
."#C0C0C0"
.Solid
.0
.chart.get()
.
Defaults to null
."#C0D0E0"
.1
.null
.null
, the max value is
automatically calculated. If the endOnTick
option is
true, the max
value might be rounded up.
The actual maximum value is also influenced by
chart.alignTicks.
Defaults to null
.max
option is set or a max extreme is set using axis.setExtremes()
,
the maxPadding will be ignored.
Defaults to 0.01
.The maximum amount of zoom on this axis. The entire axis will not be allowed to span over a smaller interval than this. For example, for a datetime axis the main unit is milliseconds. If maxZoom is set to 3600000, you can't zoom in more than to one hour.
Since 2.1, the default maxZoom for the x axis is five times the smallest interval between any of the data points.
null
the min value is
automatically calculated. If the startOnTick
option is
true, the min
value might be rounded down.
Defaults to null
.#E0E0E0
.Solid
.1
.#A0A0A0
."auto"
,
the minor tick interval is calculated as a fifth of the tickInterval. If
null
, minor ticks are not shown.
Defaults to null
.2
.inside
and outside
.
Defaults to outside
.min
option is set or a min extreme is set using axis.setExtremes()
,
the minPadding will be ignored.
Defaults to 0.01
.0
.false
.null
.null
.false
.true
.false
.1
.maxPadding
option to control the axis start.
Defaults to false
.#C0D0E0
.null
, the tick interval
is computed to approximately follow the tickPixelInterval on linear and datetime axes.
On categorized axes, a null
tickInterval will default to 1, one category.
Note that datetime axes are based on milliseconds, so for
example an interval of one day is expressed as 24 * 3600 * 1000
.
Defaults to null
.5
."between"
.null
this option sets the approximate pixel interval of the
tick marks. Not applicable to categorized axis. Defaults to 72
for the Y axis and 100
for the X axis.
inside
and outside
.
Defaults to "outside"
."linear"
.xAxis.events
.setExtremes()
method or by selecting an area in the chart. The this
keyword refers to the axis object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on which
library is used as the base for Highcharts. The new user set minimum and maximum values
can be found by event.min
and event.max
.
xAxis.labels
"left"
,
"center"
or "right"
. In inverted charts,
x axis label alignment and y axis alignment are swapped.
Defaults to "center"
.true
.this.value
. Defaults to:
function() { return this.value; }
0
.null
.null
.style: { color: '#6D869F', fontWeight: 'bold' }
0
.0
.xAxis.plotBands
click
,
mouseover
, mouseout
, mousemove
.
null
.null
.null
.null
.xAxis.plotBands.label
"center"
."top"
.align
determines
where the texts anchor point is placed within the plot band, textAlign
determines
how the text is aligned against its anchor point. Possible values are
"left", "center" and "right". Defaults to the same as
the align
option.
xAxis.plotLines
Solid
.click
,
mouseover
, mouseout
, mousemove
.
null
.null
.null
.null
.xAxis.plotLines.label
"center"
."top"
.align
determines
where the texts anchor point is placed within the plot band, textAlign
determines
how the text is aligned against its anchor point. Possible values are
"left", "center" and "right". Defaults to the same as
the align
option.
xAxis.title
"middle"
.text
to null
to disable
the title.
Defaults to "middle"
.0
.style: { color: '#6D869F', fontWeight: 'bold' }
null
.yAxis
Extends xAxis
The Y axis or value axis. Normally this is the vertical axis, though if the chart is inverted this is the horiontal axis. In case of multiple axes, the yAxis node is an array of configuration objects.
See the Axis object for programmatic access to the axis.
true
.null
.categories: ['Apples', 'Bananas', 'Oranges']Defaults to
[]
.{ second: '%H:%M:%S', minute: '%H:%M', hour: '%H:%M', day: '%e. %b', week: '%e. %b', month: '%b \'%y', year: '%Y' }
maxPadding
option to control the axis end.
Defaults to true
."#C0C0C0"
.Solid
.1
.chart.get()
.
Defaults to null
."#C0D0E0"
.0
.null
.null
, the max value is
automatically calculated. If the endOnTick
option is
true, the max
value might be rounded up.
The actual maximum value is also influenced by
chart.alignTicks.
Defaults to null
.0.05
.The maximum amount of zoom on this axis. The entire axis will not be allowed to span over a smaller interval than this. For example, for a datetime axis the main unit is milliseconds. If maxZoom is set to 3600000, you can't zoom in more than to one hour.
Since 2.1, the default maxZoom for the x axis is five times the smallest interval between any of the data points.
null
the min value is
automatically calculated. If the startOnTick
option is
true, the min
value might be rounded down.
Defaults to null
.#E0E0E0
.Solid
.1
.#A0A0A0
."auto"
,
the minor tick interval is calculated as a fifth of the tickInterval. If
null
, minor ticks are not shown.
Defaults to null
.2
.inside
and outside
.
Defaults to outside
.0.05
.0
.false
.null
.null
.false
.true
.true
.1
.maxPadding
option to control the axis start.
Defaults to true
.#C0D0E0
.null
, the tick interval
is computed to approximately follow the tickPixelInterval on linear and datetime axes.
On categorized axes, a null
tickInterval will default to 1, one category.
Note that datetime axes are based on milliseconds, so for
example an interval of one day is expressed as 24 * 3600 * 1000
.
Defaults to null
.5
."between"
.null
this option sets the approximate pixel interval of the
tick marks. Not applicable to categorized axis. Defaults to 72
for the Y axis and 100
for the X axis.
inside
and outside
.
Defaults to "outside"
."linear"
.yAxis.events
Extends xAxis.events
.setExtremes()
method or by selecting an area in the chart. The this
keyword refers to the axis object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on which
library is used as the base for Highcharts. The new user set minimum and maximum values
can be found by event.min
and event.max
.
yAxis.labels
Extends xAxis.labels
"left"
, "center"
or "right"
.
Defaults to "right"
.true
.this.value
. Defaults to:
function() { return this.value; }
0
.null
.null
.style: { color: '#6D869F', fontWeight: 'bold' }
-8
.3
.yAxis.stackLabels
"left"
, "center"
or "right"
.
The default value is calculated at runtime and depends on orientation and whether
the stack is positive or negative.
align
determines
where the texts anchor point is placed with regards to the stack, textAlign
determines
how the text is aligned against its anchor point. Possible values are
"left"
, "center"
and "right"
. The default value is calculated
at runtime and depends on orientation and whether the stack is positive or negative.
"top"
,
"middle"
or "bottom"
.
The default value is calculated at runtime and depends on orientation and whether
the stack is positive or negative.
false
.this.total
. Defaults to:
function() { return this.total; }
style: { color: '#666', 'font-size': '11px', 'line-height': '14px' }
0
.yAxis.title
Extends xAxis.title
"middle"
.text
to null
to disable
the title.
Defaults to "middle"
.40
.270
.style: { color: '#6D869F', fontWeight: 'bold' }
text
option to null
.
Defaults to "Y-values"
.yAxis.plotBands
Extends xAxis.plotBands
click
,
mouseover
, mouseout
, mousemove
.
null
.null
.null
.null
.yAxis.plotLines
Extends xAxis.plotLines
Solid
.click
,
mouseover
, mouseout
, mousemove
.
null
.null
.null
.null
.plotOptions
The plotOptions is a wrapper object for config objects for each series type. The config objects for each series can also be overridden for each series item as given in the series array.
Configuration options for the series are given in three levels. Options for all series in a chart are given in the plotOptions.series object. Then options for all series of a specific type are given in the plotOptions of that type, for example plotOptions.line. Next, options for one single series are given in the series array.
plotOptions.series
General options for all series types.
false
.- duration
- The duration of the animation in milliseconds.
- easing
- When using jQuery as the general framework, the easing can be set to
linear
orswing
. More easing functions are available with the use of jQuery plug-ins, most notably the jQuery UI suite. See the jQuery docs. When using MooToos as the general framework, use the property nametransition
instead ofeasing
.
true
.options.colors
array.
false
.''
.line
, spline
, area
and scatter
in
case it has a lineWidth
. The value for the dashStyle
include:
- Solid
- ShortDash
- ShortDot
- ShortDashDot
- ShortDashDotDot
- Dot
- Dash
- LongDash
- DashDot
- LongDashDot
- LongDashDotDot
null
.true
.chart.get()
.
Defaults to null
.2
.0
.If no x values are given for the points in a series, pointInterval defines the interval of the x values. For example, if a series contains one value every decade starting from year 0, set pointInterval to 10.
Defaults to1
.showCheckbox
is true,
the checkbox next to the series name will be checked for a selected series.
Defaults to false
.true
.selected
option.
Defaults to false
.true
.null
.mouseOut
event
on a series isn't triggered until the mouse moves over another series, or out
of the plot area. When false, the mouseOut
event on a series is
triggered when the mouse leaves the area around the series' graph or markers.
This also implies the tooltip. When stickyTracking
is false, the
tooltip will be hidden when moving the mouse between series.
Defaults to true
.true
.null
.plotOptions.series.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.series.point
plotOptions.series.point.events
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
If the series.allowPointSelect
option is true, the default action for the point's click event is to toggle the
point's select state. Returning false
cansels this action.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
.remove()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
.update()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function. The
new point options can be accessed through event.options
.
Returning false
cancels the operation.
plotOptions.series.marker.states
plotOptions.series.marker.states.hover
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.plotOptions.series.marker.states.select
series.allowPointSelect
option to true.
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#000000"
.0
.plotOptions.series.dataLabels
Extends xAxis.labels
"center"
.false
.this.percentage |
Stacked series and pies only. The point's percentage of the total. |
this.point |
The point object. The point name, if defined, is available
through this.point.name . |
this.series : |
The series object. The series name is available
through this.series.name . |
this.total |
Stacked series only. The total value at this point's x value. |
this.x : |
The y value. |
this.y : |
The y value. |
formatter: function() { return this.y; }
0
.-6
.plotOptions.series.events
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. Additionally, event.point
holds a pointer to the nearest point on the graph.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
The state of the checkbox is found by event.checked
. Return false
to prevent the default action which is to toggle the select state of the series.
.hide()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. The default action is to toggle
the visibility of the series. This can be prevented by returning false
or calling event.preventDefault()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. If the
stickyTracking option is true,
mouseOut
doesn't happen before the mouse enters another graph or leaves
the plot area.
.show()
.
plotOptions.series.states
plotOptions.series.states.hover
true
.plotOptions.series.states.hover.marker
Extends plotOptions.series.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.line
Extends plotOptions.series
false
.- duration
- The duration of the animation in milliseconds.
- easing
- When using jQuery as the general framework, the easing can be set to
linear
orswing
. More easing functions are available with the use of jQuery plug-ins, most notably the jQuery UI suite. See the jQuery docs. When using MooToos as the general framework, use the property nametransition
instead ofeasing
.
true
.options.colors
array.
false
.''
.line
, spline
, area
and scatter
in
case it has a lineWidth
. The value for the dashStyle
include:
- Solid
- ShortDash
- ShortDot
- ShortDashDot
- ShortDashDotDot
- Dot
- Dash
- LongDash
- DashDot
- LongDashDot
- LongDashDotDot
null
.true
.chart.get()
.
Defaults to null
.2
.0
.If no x values are given for the points in a series, pointInterval defines the interval of the x values. For example, if a series contains one value every decade starting from year 0, set pointInterval to 10.
Defaults to1
.showCheckbox
is true,
the checkbox next to the series name will be checked for a selected series.
Defaults to false
.true
.selected
option.
Defaults to false
.true
.null
.mouseOut
event
on a series isn't triggered until the mouse moves over another series, or out
of the plot area. When false, the mouseOut
event on a series is
triggered when the mouse leaves the area around the series' graph or markers.
This also implies the tooltip. When stickyTracking
is false, the
tooltip will be hidden when moving the mouse between series.
Defaults to true
.true
.null
.plotOptions.line.marker
Extends plotOptions.series.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.line.marker.states
Extends plotOptions.series.marker.states
plotOptions.line.marker.states.hover
Extends plotOptions.series.marker.states.hover
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.plotOptions.line.marker.states.select
Extends plotOptions.series.marker.states.select
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#000000"
.0
.plotOptions.line.dataLabels
Extends plotOptions.series.dataLabels
"center"
.false
.this.percentage |
Stacked series and pies only. The point's percentage of the total. |
this.point |
The point object. The point name, if defined, is available
through this.point.name . |
this.series : |
The series object. The series name is available
through this.series.name . |
this.total |
Stacked series only. The total value at this point's x value. |
this.x : |
The y value. |
this.y : |
The y value. |
formatter: function() { return this.y; }
0
.-6
.plotOptions.line.events
Extends plotOptions.series.events
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. Additionally, event.point
holds a pointer to the nearest point on the graph.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
The state of the checkbox is found by event.checked
. Return false
to prevent the default action which is to toggle the select state of the series.
.hide()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. The default action is to toggle
the visibility of the series. This can be prevented by returning false
or calling event.preventDefault()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. If the
stickyTracking option is true,
mouseOut
doesn't happen before the mouse enters another graph or leaves
the plot area.
.show()
.
plotOptions.line.point
Extends plotOptions.series.point
plotOptions.line.point.events
Extends plotOptions.series.point.events
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
If the series.allowPointSelect
option is true, the default action for the point's click event is to toggle the
point's select state. Returning false
cansels this action.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
.remove()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
.update()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function. The
new point options can be accessed through event.options
.
Returning false
cancels the operation.
plotOptions.line.states
Extends plotOptions.series.states
plotOptions.line.states.hover
Extends plotOptions.series.states.hover
true
.plotOptions.line.states.hover.marker
Extends plotOptions.series.states.hover.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.spline
Extends plotOptions.series
false
.- duration
- The duration of the animation in milliseconds.
- easing
- When using jQuery as the general framework, the easing can be set to
linear
orswing
. More easing functions are available with the use of jQuery plug-ins, most notably the jQuery UI suite. See the jQuery docs. When using MooToos as the general framework, use the property nametransition
instead ofeasing
.
true
.options.colors
array.
false
.''
.line
, spline
, area
and scatter
in
case it has a lineWidth
. The value for the dashStyle
include:
- Solid
- ShortDash
- ShortDot
- ShortDashDot
- ShortDashDotDot
- Dot
- Dash
- LongDash
- DashDot
- LongDashDot
- LongDashDotDot
null
.true
.chart.get()
.
Defaults to null
.2
.0
.If no x values are given for the points in a series, pointInterval defines the interval of the x values. For example, if a series contains one value every decade starting from year 0, set pointInterval to 10.
Defaults to1
.showCheckbox
is true,
the checkbox next to the series name will be checked for a selected series.
Defaults to false
.true
.selected
option.
Defaults to false
.true
.null
.mouseOut
event
on a series isn't triggered until the mouse moves over another series, or out
of the plot area. When false, the mouseOut
event on a series is
triggered when the mouse leaves the area around the series' graph or markers.
This also implies the tooltip. When stickyTracking
is false, the
tooltip will be hidden when moving the mouse between series.
Defaults to true
.true
.null
.plotOptions.spline.marker
Extends plotOptions.series.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.spline.marker.states
Extends plotOptions.series.marker.states
plotOptions.spline.marker.states.hover
Extends plotOptions.series.marker.states.hover
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.plotOptions.spline.marker.states.select
Extends plotOptions.series.marker.states.select
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#000000"
.0
.plotOptions.spline.dataLabels
Extends plotOptions.series.dataLabels
"center"
.false
.this.percentage |
Stacked series and pies only. The point's percentage of the total. |
this.point |
The point object. The point name, if defined, is available
through this.point.name . |
this.series : |
The series object. The series name is available
through this.series.name . |
this.total |
Stacked series only. The total value at this point's x value. |
this.x : |
The y value. |
this.y : |
The y value. |
formatter: function() { return this.y; }
0
.-6
.plotOptions.spline.events
Extends plotOptions.series.events
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. Additionally, event.point
holds a pointer to the nearest point on the graph.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
The state of the checkbox is found by event.checked
. Return false
to prevent the default action which is to toggle the select state of the series.
.hide()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. The default action is to toggle
the visibility of the series. This can be prevented by returning false
or calling event.preventDefault()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. If the
stickyTracking option is true,
mouseOut
doesn't happen before the mouse enters another graph or leaves
the plot area.
.show()
.
plotOptions.spline.point
Extends plotOptions.series.point
plotOptions.spline.point.events
Extends plotOptions.series.point.events
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
If the series.allowPointSelect
option is true, the default action for the point's click event is to toggle the
point's select state. Returning false
cansels this action.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
.remove()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
.update()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function. The
new point options can be accessed through event.options
.
Returning false
cancels the operation.
plotOptions.spline.states
Extends plotOptions.series.states
plotOptions.spline.states.hover
Extends plotOptions.series.states.hover
true
.plotOptions.spline.states.hover.marker
Extends plotOptions.series.states.hover.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.scatter
Extends plotOptions.series
false
.- duration
- The duration of the animation in milliseconds.
- easing
- When using jQuery as the general framework, the easing can be set to
linear
orswing
. More easing functions are available with the use of jQuery plug-ins, most notably the jQuery UI suite. See the jQuery docs. When using MooToos as the general framework, use the property nametransition
instead ofeasing
.
true
.options.colors
array.
false
.''
.line
, spline
, area
and scatter
in
case it has a lineWidth
. The value for the dashStyle
include:
- Solid
- ShortDash
- ShortDot
- ShortDashDot
- ShortDashDotDot
- Dot
- Dash
- LongDash
- DashDot
- LongDashDot
- LongDashDotDot
null
.true
.chart.get()
.
Defaults to null
.0
.0
.If no x values are given for the points in a series, pointInterval defines the interval of the x values. For example, if a series contains one value every decade starting from year 0, set pointInterval to 10.
Defaults to1
.showCheckbox
is true,
the checkbox next to the series name will be checked for a selected series.
Defaults to false
.true
.selected
option.
Defaults to false
.true
.null
.mouseOut
event
on a series isn't triggered until the mouse moves over another series, or out
of the plot area. When false, the mouseOut
event on a series is
triggered when the mouse leaves the area around the series' graph or markers.
This also implies the tooltip. When stickyTracking
is false, the
tooltip will be hidden when moving the mouse between series.
Defaults to true
.true
.null
.plotOptions.scatter.marker
Extends plotOptions.series.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.scatter.marker.states
Extends plotOptions.series.marker.states
plotOptions.scatter.marker.states.hover
Extends plotOptions.series.marker.states.hover
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.plotOptions.scatter.marker.states.select
Extends plotOptions.series.marker.states.select
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#000000"
.0
.plotOptions.scatter.dataLabels
Extends plotOptions.series.dataLabels
"center"
.false
.this.percentage |
Stacked series and pies only. The point's percentage of the total. |
this.point |
The point object. The point name, if defined, is available
through this.point.name . |
this.series : |
The series object. The series name is available
through this.series.name . |
this.total |
Stacked series only. The total value at this point's x value. |
this.x : |
The y value. |
this.y : |
The y value. |
formatter: function() { return this.y; }
0
.-6
.plotOptions.scatter.events
Extends plotOptions.series.events
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. Additionally, event.point
holds a pointer to the nearest point on the graph.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
The state of the checkbox is found by event.checked
. Return false
to prevent the default action which is to toggle the select state of the series.
.hide()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. The default action is to toggle
the visibility of the series. This can be prevented by returning false
or calling event.preventDefault()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. If the
stickyTracking option is true,
mouseOut
doesn't happen before the mouse enters another graph or leaves
the plot area.
.show()
.
plotOptions.scatter.point
Extends plotOptions.series.point
plotOptions.scatter.point.events
Extends plotOptions.series.point.events
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
If the series.allowPointSelect
option is true, the default action for the point's click event is to toggle the
point's select state. Returning false
cansels this action.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
.remove()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
.update()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function. The
new point options can be accessed through event.options
.
Returning false
cancels the operation.
plotOptions.scatter.states
Extends plotOptions.series.states
plotOptions.scatter.states.hover
Extends plotOptions.series.states.hover
true
.0
.plotOptions.scatter.states.hover.marker
Extends plotOptions.series.states.hover.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.area
Extends plotOptions.series
false
.- duration
- The duration of the animation in milliseconds.
- easing
- When using jQuery as the general framework, the easing can be set to
linear
orswing
. More easing functions are available with the use of jQuery plug-ins, most notably the jQuery UI suite. See the jQuery docs. When using MooToos as the general framework, use the property nametransition
instead ofeasing
.
true
.options.colors
array.
false
.''
.line
, spline
, area
and scatter
in
case it has a lineWidth
. The value for the dashStyle
include:
- Solid
- ShortDash
- ShortDot
- ShortDashDot
- ShortDashDotDot
- Dot
- Dash
- LongDash
- DashDot
- LongDashDot
- LongDashDotDot
null
.true
.chart.get()
.
Defaults to null
.2
.0
.If no x values are given for the points in a series, pointInterval defines the interval of the x values. For example, if a series contains one value every decade starting from year 0, set pointInterval to 10.
Defaults to1
.showCheckbox
is true,
the checkbox next to the series name will be checked for a selected series.
Defaults to false
.true
.selected
option.
Defaults to false
.true
.null
.mouseOut
event
on a series isn't triggered until the mouse moves over another series, or out
of the plot area. When false, the mouseOut
event on a series is
triggered when the mouse leaves the area around the series' graph or markers.
This also implies the tooltip. When stickyTracking
is false, the
tooltip will be hidden when moving the mouse between series.
Defaults to true
.true
.null
.null
, the series' color
is
used with the series' fillOpacity
.
Defaults to null
..75
.color
of the series, but the lineColor setting allows setting a separate
color for the line without altering the fillColor
.
Defaults to null
.0
.plotOptions.area.marker
Extends plotOptions.series.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.area.marker.states
Extends plotOptions.series.marker.states
plotOptions.area.marker.states.hover
Extends plotOptions.series.marker.states.hover
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.plotOptions.area.marker.states.select
Extends plotOptions.series.marker.states.select
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#000000"
.0
.plotOptions.area.dataLabels
Extends plotOptions.series.dataLabels
"center"
.false
.this.percentage |
Stacked series and pies only. The point's percentage of the total. |
this.point |
The point object. The point name, if defined, is available
through this.point.name . |
this.series : |
The series object. The series name is available
through this.series.name . |
this.total |
Stacked series only. The total value at this point's x value. |
this.x : |
The y value. |
this.y : |
The y value. |
formatter: function() { return this.y; }
0
.-6
.plotOptions.area.events
Extends plotOptions.series.events
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. Additionally, event.point
holds a pointer to the nearest point on the graph.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
The state of the checkbox is found by event.checked
. Return false
to prevent the default action which is to toggle the select state of the series.
.hide()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. The default action is to toggle
the visibility of the series. This can be prevented by returning false
or calling event.preventDefault()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. If the
stickyTracking option is true,
mouseOut
doesn't happen before the mouse enters another graph or leaves
the plot area.
.show()
.
plotOptions.area.point
Extends plotOptions.series.point
plotOptions.area.point.events
Extends plotOptions.series.point.events
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
If the series.allowPointSelect
option is true, the default action for the point's click event is to toggle the
point's select state. Returning false
cansels this action.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
.remove()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
.update()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function. The
new point options can be accessed through event.options
.
Returning false
cancels the operation.
plotOptions.area.states
Extends plotOptions.series.states
plotOptions.area.states.hover
Extends plotOptions.series.states.hover
true
.plotOptions.area.states.hover.marker
Extends plotOptions.series.states.hover.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.areaspline
Extends plotOptions.area
null
, the series' color
is
used with the series' fillOpacity
.
Defaults to null
..75
.color
of the series, but the lineColor setting allows setting a separate
color for the line without altering the fillColor
.
Defaults to null
.0
.false
.- duration
- The duration of the animation in milliseconds.
- easing
- When using jQuery as the general framework, the easing can be set to
linear
orswing
. More easing functions are available with the use of jQuery plug-ins, most notably the jQuery UI suite. See the jQuery docs. When using MooToos as the general framework, use the property nametransition
instead ofeasing
.
true
.options.colors
array.
false
.''
.line
, spline
, area
and scatter
in
case it has a lineWidth
. The value for the dashStyle
include:
- Solid
- ShortDash
- ShortDot
- ShortDashDot
- ShortDashDotDot
- Dot
- Dash
- LongDash
- DashDot
- LongDashDot
- LongDashDotDot
null
.true
.chart.get()
.
Defaults to null
.2
.0
.If no x values are given for the points in a series, pointInterval defines the interval of the x values. For example, if a series contains one value every decade starting from year 0, set pointInterval to 10.
Defaults to1
.showCheckbox
is true,
the checkbox next to the series name will be checked for a selected series.
Defaults to false
.true
.selected
option.
Defaults to false
.true
.null
.mouseOut
event
on a series isn't triggered until the mouse moves over another series, or out
of the plot area. When false, the mouseOut
event on a series is
triggered when the mouse leaves the area around the series' graph or markers.
This also implies the tooltip. When stickyTracking
is false, the
tooltip will be hidden when moving the mouse between series.
Defaults to true
.true
.null
.plotOptions.areaspline.marker
Extends plotOptions.area.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.areaspline.marker.states
Extends plotOptions.area.marker.states
plotOptions.areaspline.marker.states.hover
Extends plotOptions.area.marker.states.hover
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.plotOptions.areaspline.marker.states.select
Extends plotOptions.area.marker.states.select
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#000000"
.0
.plotOptions.areaspline.dataLabels
Extends plotOptions.area.dataLabels
"center"
.false
.this.percentage |
Stacked series and pies only. The point's percentage of the total. |
this.point |
The point object. The point name, if defined, is available
through this.point.name . |
this.series : |
The series object. The series name is available
through this.series.name . |
this.total |
Stacked series only. The total value at this point's x value. |
this.x : |
The y value. |
this.y : |
The y value. |
formatter: function() { return this.y; }
0
.-6
.plotOptions.areaspline.events
Extends plotOptions.area.events
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. Additionally, event.point
holds a pointer to the nearest point on the graph.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
The state of the checkbox is found by event.checked
. Return false
to prevent the default action which is to toggle the select state of the series.
.hide()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. The default action is to toggle
the visibility of the series. This can be prevented by returning false
or calling event.preventDefault()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. If the
stickyTracking option is true,
mouseOut
doesn't happen before the mouse enters another graph or leaves
the plot area.
.show()
.
plotOptions.areaspline.point
Extends plotOptions.area.point
plotOptions.areaspline.point.events
Extends plotOptions.area.point.events
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
If the series.allowPointSelect
option is true, the default action for the point's click event is to toggle the
point's select state. Returning false
cansels this action.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
.remove()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
.update()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function. The
new point options can be accessed through event.options
.
Returning false
cancels the operation.
plotOptions.areaspline.states
Extends plotOptions.area.states
plotOptions.areaspline.states.hover
Extends plotOptions.area.states.hover
true
.plotOptions.areaspline.states.hover.marker
Extends plotOptions.area.states.hover.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.column
Extends plotOptions.series
false
.- duration
- The duration of the animation in milliseconds.
- easing
- When using jQuery as the general framework, the easing can be set to
linear
orswing
. More easing functions are available with the use of jQuery plug-ins, most notably the jQuery UI suite. See the jQuery docs. When using MooToos as the general framework, use the property nametransition
instead ofeasing
.
true
.options.colors
array.
false
.''
.line
, spline
, area
and scatter
in
case it has a lineWidth
. The value for the dashStyle
include:
- Solid
- ShortDash
- ShortDot
- ShortDashDot
- ShortDashDotDot
- Dot
- Dash
- LongDash
- DashDot
- LongDashDot
- LongDashDotDot
null
.true
.chart.get()
.
Defaults to null
.2
.0
.If no x values are given for the points in a series, pointInterval defines the interval of the x values. For example, if a series contains one value every decade starting from year 0, set pointInterval to 10.
Defaults to1
.showCheckbox
is true,
the checkbox next to the series name will be checked for a selected series.
Defaults to false
.true
.selected
option.
Defaults to false
.true
.null
.mouseOut
event
on a series isn't triggered until the mouse moves over another series, or out
of the plot area. When false, the mouseOut
event on a series is
triggered when the mouse leaves the area around the series' graph or markers.
This also implies the tooltip. When stickyTracking
is false, the
tooltip will be hidden when moving the mouse between series.
Defaults to true
.true
.null
."#FFFFFF"
.0
.1
.options.colors
collection, this option determines whether the chart should receive
one color per series or one color per point.
Defaults to false
.0.2
.0
.0.1
.null
,
the width is calculated from the pointPadding
and groupPadding
.
Defaults to null
.plotOptions.column.dataLabels
Extends plotOptions.series.dataLabels
"center"
.false
.this.percentage |
Stacked series and pies only. The point's percentage of the total. |
this.point |
The point object. The point name, if defined, is available
through this.point.name . |
this.series : |
The series object. The series name is available
through this.series.name . |
this.total |
Stacked series only. The total value at this point's x value. |
this.x : |
The y value. |
this.y : |
The y value. |
formatter: function() { return this.y; }
0
.-6
.plotOptions.column.events
Extends plotOptions.series.events
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. Additionally, event.point
holds a pointer to the nearest point on the graph.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
The state of the checkbox is found by event.checked
. Return false
to prevent the default action which is to toggle the select state of the series.
.hide()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. The default action is to toggle
the visibility of the series. This can be prevented by returning false
or calling event.preventDefault()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. If the
stickyTracking option is true,
mouseOut
doesn't happen before the mouse enters another graph or leaves
the plot area.
.show()
.
plotOptions.column.point
Extends plotOptions.series.point
plotOptions.column.point.events
Extends plotOptions.series.point.events
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
If the series.allowPointSelect
option is true, the default action for the point's click event is to toggle the
point's select state. Returning false
cansels this action.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
.remove()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
.update()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function. The
new point options can be accessed through event.options
.
Returning false
cancels the operation.
plotOptions.column.states
Extends plotOptions.series.states
plotOptions.column.states.hover
Extends plotOptions.series.states.hover
true
.0.1
.plotOptions.column.states.hover.marker
Extends plotOptions.series.states.hover.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.bar
Extends plotOptions.column
"#FFFFFF"
.0
.1
.options.colors
collection, this option determines whether the chart should receive
one color per series or one color per point.
Defaults to false
.0.2
.0
.0.1
.null
,
the width is calculated from the pointPadding
and groupPadding
.
Defaults to null
.false
.- duration
- The duration of the animation in milliseconds.
- easing
- When using jQuery as the general framework, the easing can be set to
linear
orswing
. More easing functions are available with the use of jQuery plug-ins, most notably the jQuery UI suite. See the jQuery docs. When using MooToos as the general framework, use the property nametransition
instead ofeasing
.
true
.options.colors
array.
false
.''
.line
, spline
, area
and scatter
in
case it has a lineWidth
. The value for the dashStyle
include:
- Solid
- ShortDash
- ShortDot
- ShortDashDot
- ShortDashDotDot
- Dot
- Dash
- LongDash
- DashDot
- LongDashDot
- LongDashDotDot
null
.true
.chart.get()
.
Defaults to null
.2
.0
.If no x values are given for the points in a series, pointInterval defines the interval of the x values. For example, if a series contains one value every decade starting from year 0, set pointInterval to 10.
Defaults to1
.showCheckbox
is true,
the checkbox next to the series name will be checked for a selected series.
Defaults to false
.true
.selected
option.
Defaults to false
.true
.null
.mouseOut
event
on a series isn't triggered until the mouse moves over another series, or out
of the plot area. When false, the mouseOut
event on a series is
triggered when the mouse leaves the area around the series' graph or markers.
This also implies the tooltip. When stickyTracking
is false, the
tooltip will be hidden when moving the mouse between series.
Defaults to true
.true
.null
.plotOptions.bar.dataLabels
Extends plotOptions.column.dataLabels
"left"
.false
.this.percentage |
Stacked series and pies only. The point's percentage of the total. |
this.point |
The point object. The point name, if defined, is available
through this.point.name . |
this.series : |
The series object. The series name is available
through this.series.name . |
this.total |
Stacked series only. The total value at this point's x value. |
this.x : |
The y value. |
this.y : |
The y value. |
formatter: function() { return this.y; }
5
.-6
.plotOptions.bar.events
Extends plotOptions.column.events
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. Additionally, event.point
holds a pointer to the nearest point on the graph.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
The state of the checkbox is found by event.checked
. Return false
to prevent the default action which is to toggle the select state of the series.
.hide()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. The default action is to toggle
the visibility of the series. This can be prevented by returning false
or calling event.preventDefault()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. If the
stickyTracking option is true,
mouseOut
doesn't happen before the mouse enters another graph or leaves
the plot area.
.show()
.
plotOptions.bar.point
Extends plotOptions.column.point
plotOptions.bar.point.events
Extends plotOptions.column.point.events
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
If the series.allowPointSelect
option is true, the default action for the point's click event is to toggle the
point's select state. Returning false
cansels this action.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
.remove()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
.update()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function. The
new point options can be accessed through event.options
.
Returning false
cancels the operation.
plotOptions.bar.states
Extends plotOptions.column.states
plotOptions.bar.states.hover
Extends plotOptions.column.states.hover
0.1
.true
.plotOptions.bar.states.hover.marker
Extends plotOptions.column.states.hover.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.plotOptions.pie
Extends plotOptions.series
false
.- duration
- The duration of the animation in milliseconds.
- easing
- When using jQuery as the general framework, the easing can be set to
linear
orswing
. More easing functions are available with the use of jQuery plug-ins, most notably the jQuery UI suite. See the jQuery docs. When using MooToos as the general framework, use the property nametransition
instead ofeasing
.
true
.options.colors
array.
false
.''
.line
, spline
, area
and scatter
in
case it has a lineWidth
. The value for the dashStyle
include:
- Solid
- ShortDash
- ShortDot
- ShortDashDot
- ShortDashDotDot
- Dot
- Dash
- LongDash
- DashDot
- LongDashDot
- LongDashDotDot
null
.true
.chart.get()
.
Defaults to null
.2
.0
.If no x values are given for the points in a series, pointInterval defines the interval of the x values. For example, if a series contains one value every decade starting from year 0, set pointInterval to 10.
Defaults to1
.showCheckbox
is true,
the checkbox next to the series name will be checked for a selected series.
Defaults to false
.true
.selected
option.
Defaults to false
."#FFFFFF"
.1
.['50%', '50%']
.0
.false
.null
.mouseOut
event
on a series isn't triggered until the mouse moves over another series, or out
of the plot area. When false, the mouseOut
event on a series is
triggered when the mouse leaves the area around the series' graph or markers.
This also implies the tooltip. When stickyTracking
is false, the
tooltip will be hidden when moving the mouse between series.
Defaults to true
.true
.null
."75%"
.10
.plotOptions.pie.dataLabels
Extends plotOptions.series.dataLabels
null
.1
.{point.color}
.5
.30
.true
.this.percentage |
Stacked series and pies only. The point's percentage of the total. |
this.point |
The point object. The point name, if defined, is available
through this.point.name . |
this.series : |
The series object. The series name is available
through this.series.name . |
this.total |
Stacked series only. The total value at this point's x value. |
this.x : |
The y value. |
this.y : |
The y value. |
formatter: function() { return this.y; }
0
.-6
.plotOptions.pie.events
Extends plotOptions.series.events
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. Additionally, event.point
holds a pointer to the nearest point on the graph.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
The state of the checkbox is found by event.checked
. Return false
to prevent the default action which is to toggle the select state of the series.
.hide()
.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
series object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. If the
stickyTracking option is true,
mouseOut
doesn't happen before the mouse enters another graph or leaves
the plot area.
.show()
.
plotOptions.pie.point
Extends plotOptions.series.point
plotOptions.pie.point.events
Extends plotOptions.series.point.events
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
If the series.allowPointSelect
option is true, the default action for the point's click event is to toggle the
point's select state. Returning false
cansels this action.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
.remove()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
.update()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function. The
new point options can be accessed through event.options
.
Returning false
cancels the operation.
this
keyword refers to the
point itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts. The default action is to toggle
the visibility of the point. This can be prevented by calling
event.preventDefault()
.
plotOptions.pie.states
Extends plotOptions.series.states
plotOptions.pie.states.hover
Extends plotOptions.series.states.hover
true
..1
.plotOptions.pie.states.hover.marker
Extends plotOptions.series.states.hover.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.labels
style: { color: '#3E576F' }
labels.items
""
.style: { left: '100px', top: '100px' }
legend
"center"
.null
.#909090
.5
.1
.false
.style
unless overridden here. Defaults to:
itemHiddenStyle: { color: '#CCC' }
style
unless overridden here. Defaults to:
itemHoverStyle: { color: '#000' }
itemStyle: { cursor: 'pointer', color: '#3E576F' }
null
."horizontal"
.labelFormatter: function() { return this.name }
16
.15
.false
.backgroundColor
also needs to be applied for this to take effect.
Defaults to false
.align
, verticalAlign
, x
and y
,
but the styles are still parsed for backwards compatibility.
5
.30
.y
option.
Defaults to "bottom"
.null
.align
within chart.spacingLeft and chart.spacingRight. Negative
x moves it to the left, positive x moves it to the right. The default value of
15 together with align: "center"
puts it in the center of the
plot area.
Defaults to 0
.verticalAlign
within chart.spacingTop and chart.spacingBottom. Negative
y moves it up, positive y moves it down.
Defaults to 0
.loading
chart.showLoading()
. It is a utility for developers to communicate
to the end user that something is going on, for example while retrieving new data
via an XHR connection. The "Loading..." text itself is not part of this configuration
object, but part of the lang
object.
100
.span
. Defaults to:
labelStyle: { fontWeight: 'bold', position: 'relative', top: '1em' }
100
.style: { position: 'absolute', backgroundColor: 'white', opacity: 0.5, textAlign: 'center' }
tooltip
"rgba(255, 255, 255, .85)"
.null
, the border takes the color of the
corresponding series or point.
Defaults to "auto"
.5
.2
.- Boolean
- If the crosshairs option is true, a single crosshair relating to the x axis will be shown.
- Array of booleans
- In an array of booleans, the first value turns on the x axis crosshair and the second
value to the y axis crosshair. Use
[true, true]
to show complete crosshairs. - Array of objects
- In an array of objects, the first value applies to the x axis crosshair and the second
value to the y axis crosshair. For each dimension, a
width
,color
,dashStyle
andzIndex
can be given.
null
.true
.Callback function to format the text of the tooltip. Return false to disable tooltip for a specific point on series.
A subset of HTML is supported. The HTML of the tooltip is parsed and converted to SVG,
therefore this isn't a complete HTML renderer. The following tabs are supported:
<b>
, <strong>
,
<i>
, <em>
, <br/>
, <span>
.
Spans can be styled with a style
attribute, but only text-related CSS that is
shared with SVG is handled.
Since version 2.1 the tooltip can be shared between multiple series through
the shared
option. The available data in the formatter differ a bit
depending on whether the tooltip is shared or not. In a shared tooltip, all
properties except x
, which is common for all points, are kept in
an array, this.points
.
Available data are:
- this.percentage (not shared) / this.points[i].percentage (shared)
- Stacked series and pies only. The point's percentage of the total.
- this.point (not shared) / this.points[i].point (shared)
- The point object. The point name, if defined, is available
through
this.point.name
. - this.points
- In a shared tooltip, this is an array containing all other properties for each point.
- this.series (not shared) / this.points[i].series (shared)
- The series object. The series name is available
through
this.series.name
. - this.total (not shared) / this.points[i].total (shared)
- Stacked series only. The total value at this point's x value.
- this.x
- The x value. This property is the same regardless of the tooltip being shared or not.
- this.y (not shared) / this.points[i].y (shared)
- The y value.
true
.false
.10/25
..highcharts-tooltip
.
Default value:
style: { color: '#333333', fontSize: '9pt', padding: '5px' }
credits
align
, verticalAlign
, x
and y
.
Defaults to
position: { align: 'right', x: -10, verticalAlign: 'bottom', y: -5 }
"http://www.highcharts.com"
.itemStyle: { cursor: 'pointer', color: '#909090', fontSize: '10px' }
"Highcharts.com"
.global
lang
options, must be set using the Highcharts.setOptions
method.
Highcharts.setOptions({ global: { useUTC: false } });
Highcharts.dateFormat
. Advantages of using UTC is that the time
displays equally regardless of the user agent's time zone settings. Local time
can be used when the data is loaded in real time or when correct Daylight Saving Time
transitions are required.
Defaults to true
.colors
colors: [ '#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92' ]
symbols
symbols: [ 'circle', 'diamond', 'square', 'triangle', 'triangle-down' ]
lang
Highcharts.setOptions
to
set it before any chart is initiated.
Highcharts.setOptions({ lang: { months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] } });
Highcharts.numberFormat
method
unless otherwise specified in the function arguments.
Defaults to "."
."Download PNG image"
."Download JPEG image"
."Download PDF document"
."Download SVG vector image"
."Export to raster or vector image"
.chart.showLoading
.
Defaults to Loading...
.%B
format in Highcharts.dateFormat()
.
Defaults to ['January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December']
.%b
format in Highcharts.dateFormat()
.
Defaults to ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
."Print the chart"
.Reset zoom
.Reset zoom level 1:1
.Highcharts.numberFormat
method
unless otherwise specified in the function arguments.
Defaults to ","
.['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
.series
plotOptions
for that specific
type of plot can be added to a series individually. For example, even though a general
lineWidth
is specified in plotOptions.series
, an individual
lineWidth
can be specified for each series.- A list of numerical values. In this case, the numberical values will
be interpreted and y values, and x values will be automatically calculated,
either starting at 0 and incrementing by 1, or from
pointStart
andpointInterval
given in the plotOptions. If the axis is has categories, these will be used. Example:data: [0, 5, 3, 5]
- A list of arrays with two values. In this case, the first value is the
x value and the second is the y value. If the first value is a string, it is
applied as the name of the point, and the x value is incremented following
the above rules. Example:
data: [[5, 2], [6, 3], [8, 2]]
- A list of object with named values. In this case the objects are
point configuration objects as seen under
options.point. Example:
data: [{ name: 'Point 1', color: '#00FF00', y: 0 }, { name: 'Point 2', color: '#FF00FF', y: 5 }]
""
.null
.undefined
.""
.null
.area
, areaspline
,
bar
, column
, line
, pie
,
scatter
or spline
.
Defaults to "line"
.0
.0
.point
null
.chart.get()
.
Defaults to null
.null
.undefined
.""
.false
.null
.null
.point.events
Extends plotOptions.series.point.events
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
If the series.allowPointSelect
option is true, the default action for the point's click event is to toggle the
point's select state. Returning false
cansels this action.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
This contains common event information based on jQuery or MooTools depending on
which library is used as the base for Highcharts.
.remove()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
this
keyword refers to the
point object itself. One parameter, event
, is passed to the function.
Returning false
cancels the operation.
.update()
method. The this
keyword refers to the
point object itself. One parameter, event
, is passed to the function. The
new point options can be accessed through event.options
.
Returning false
cancels the operation.
point.marker
Extends plotOptions.series.marker
true
.null
, the series' or point's color
is used.
Defaults to null
.null
, the series' or point's color
is used.
Defaults to "#FFFFFF"
.0
.null
.navigation
menuStyle: { border: '1px solid #A0A0A0', background: '#FFFFFF' }
menuItemStyle: { padding: '0 5px', background: NONE, color: '#303030' }
menuItemHoverStyle: { background: '#4572A5', color: '#FFFFFF' }
navigation.buttonOptions
"right"
.backgroundColor: { linearGradient: [0, 0, 0, 20], stops: [ [0.4, '#F7F7F7'], [0.6, '#E3E3E3'] ] }
"#B0B0B0"
.3
.true
.#909090
.#81A7CF
.#4572A5
.#E0E0E0
.12
."#A0A0A0"
.1
.11.5
.10.5
."top"
."top"
.verticalAlign
.
Defaults to 10
.exporting
true
.false
."chart"
.chart.exportChart()
is called
without specifying a type
option. Possible values are image/png
,
image/jpeg
, application/pdf
and image/svg+xml
.
Defaults to "image/png"
.image/jpeg
http://export.highcharts.com
.800
.exporting.buttons
exporting.buttons.exportButton
Extends navigation.buttonOptions
"right"
.backgroundColor: { linearGradient: [0, 0, 0, 20], stops: [ [0.4, '#F7F7F7'], [0.6, '#E3E3E3'] ] }
"#B0B0B0"
.3
.true
.#909090
.#768F3E
.#4572A5
.A collection of config options for the menu items. Each options object consists
of a text
option which is a string to show in the menu item, as
well as an onclick
parameter which is a callback function to run
on click.
By default, there is one menu item for each of the available export types.
Menu items can be customized by defining a new array of items and assigning
null
to unwanted positions (see override example below).
Highcharts.Renderer.symbols
collection. The default
exportIcon
function is part of the exporting module.
Defaults to "exportIcon"
.#A8BF77
.12
."#A0A0A0"
.1
.11.5
.10.5
."top"
.verticalAlign
.
Defaults to 10
.align
option.
Defaults to 10
.exporting.buttons.printButton
Extends navigation.buttonOptions
"right"
.backgroundColor: { linearGradient: [0, 0, 0, 20], stops: [ [0.4, '#F7F7F7'], [0.6, '#E3E3E3'] ] }
"#B0B0B0"
.3
.true
.#909090
.#779ABF
.#4572A5
.chart.print()
, but it can be overridden to do other actions.
Highcharts.Renderer.symbols
collection. The default
print
function is part of the exporting module.
Defaults to "printIcon"
.#B5C9DF
.12
."#A0A0A0"
.1
.11.5
.10.5
."top"
.verticalAlign
.
Defaults to 10
.align
option.
Defaults to -36
.The Highcharts Namespace
The namespace under which all other Highcharts variables are assembled is called
Highcharts
.
var chart1 = new Highcharts.Chart(options);
Methods
This is the constructor for creating a new chart object.
var chart1 = new Highcharts.Chart(options);
Parameters
-
options: Object
The chart options, as documented under the heading "The options object" in the left menu. -
callback: Function
A function to execute when the chart object is finished loading and rendering. In most cases the chart is built in one thread, but in Internet Explorer version 8 or less the chart is sometimes initiated before the document is ready, and in these cases thechart
object will not be finished directly after callingnew Highcharts.Chart()
. As a consequence, code that relies on the newly built Chart object should always run in the callback. Defining achart.event.load
handler is equivalent.
Returns
- A reference to the created
Chart
object.
Formats a JavaScript date timestamp (milliseconds since Jan 1st 1970) into a human readable date string. The format is a subset of the formats for PHP's strftime function.
Currently these formats are supported:
- %a: Short weekday, like 'Mon'.
- %A: Long weekday, like 'Monday'.
- %d: Two digit day of the month, 01 to 31.
- %e: Day of the month, 1 through 31.
- %b: Short month, like 'Jan'.
- %B: Long month, like 'January'.
- %m: Two digit month number, 01 through 12.
- %y: Two digits year, like 09 for 2009.
- %Y: Four digits year, like 2009.
- %H: Two digits hours in 24h format, 00 through 23.
- %I: Two digits hours in 12h format, 00 through 11.
- %l (Lower case L): Hours in 12h format, 1 through 11.
- %M: Two digits minutes, 00 through 59.
- %p: Upper case AM or PM.
- %P: Lower case AM or PM.
- %S: Two digits seconds, 00 through 59
tooltip: { formatter: function() { return '<strong>'+ this.series.name +'</strong>'+ Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +': '+ this.y +' m/s'; } }, ...
Parameters
-
format: String
A string containing some of the formats above. -
time: Number
The JavaScript time to format. -
capitalize: Boolean
Whether to capitalize words in the return string.
Returns
- A string with any format symbol replaced.
Formats a JavaScript number with grouped thousands, a fixed amount of decimals and an optional decimal point. It is a port of PHP's function with the same name. See PHP number_format for a full explanation of the parameters.
tooltip: { formatter: function() { return ''+ this.series.name +''+ this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' millions'; } }, ...
Parameters
-
number: Number
The raw number to format. -
decimals: Number
The desired number of decimals. -
decimalPoint: String
The decimal point. Defaults to "." or to the string specified globally in options.lang.decimalPoint. -
thousandsSep: String
The thousands separator. Defaults to "," or to the string specified globally in options.lang.thousandsSep.
Returns
- A string with with the input number formatted.
Sets the options globally for all charts created after this has been called. Takes an options JavaScript object structure as the argument. These options are merged with the default options and the result is returned.
Parameters
-
options: Object
The chart configuration object.
Returns
- The new options, a merge between the default options and the user set options.
Highcharts.Renderer
Allows direct access to the Highcharts rendering layer in order to draw primitive shapes like circles, rectangles, paths or text directly on a chart, or independent from any chart. The Renderer represents a wrapper object for SVG in modern browsers and VML in IE < 8.
An existing chart's renderer can be accessed through chart.renderer
. To create a renderer independent
from a chart, use var renderer = new Highcharts.Renderer(parentNode, width, height);
where parentNode
is the HTML element where you want to add it.
The Renderer's methods are chained whereever possible, so you can initiate an element then call for example attr
and css
and add
on that element in one statement.
Draw an arc on the renderer canvas.
Parameters
-
centerX: Number
The x position of the arc's center in the SVG element. -
centerY: Number
The y position of the arc's center in the SVG element. -
outerRadius: Number
The outer radius of the arc. -
innerRadius: Number
The inner radius of the arc. -
start: Number
The starting angle of the arc in radians, where 0 is to the right and -Math.PI/2 is up. -
end: Number
The ending angle of the arc in radians, where 0 is to the right and -Math.PI/2 is up.
Returns
- An Element object.
Draw circle on the renderer canvas.
Parameters
-
centerX: Number
The x position of the circle's center in the SVG element. -
centerY: Number
The y position of the circle's center in the SVG element. -
radius: Number
The radius of the circle.
Returns
- An Element object.
Add an SVG/VML group.
Parameters
-
name: String
The name of the group. This will be used in the class name, which will be"highcharts-"+ name
. Other Element objects are added to the group by using the group as the first parameter in .add() for the wrappers.
Returns
- An Element object.
Add an image from an external resource.
Parameters
-
source: String
The URL of the image. -
x: String
The x position of the image's upper left corner. -
y: String
The y position of the image's upper left corner. -
width: String
The width of the image. -
height: String
The height of the image.
Returns
- An Element object.
Add a path based on SVG's path commands. In SVG capable browsers all path commands are supported, but in VML only a subset is supported, most notably moveTo, lineTo and curve commands.
Parameters
-
path: Array
An SVG path split up in array form.
Returns
- An Element object.
Add a rectangle.
Parameters
-
x: Number
The x position of the rectangle's upper left corner. -
y: Number
The y position of the rectangle's upper left corner. -
width: Number
The width of the rectangle. -
height: Number
The height of the rectangle. -
cornerRadius: Number
The corner radius of all the rectangle's corners.
Returns
- An Element object.
Draw text. The text can contain a subset of HTML, like spans and anchors and some basic text styling of these.
Parameters
-
str: String
The text or HTML to draw -
x: Number
The x position of the text's lower left corner. -
y: Number
The y position of the text's lower left corner.
Returns
- An Element object.
The Element object
The Element class is a JavaScript wrapper for SVG elements used in the rendering layer of Highchart. Combined with the Renderer object, these elements allows freeform annotation in the charts or even in your HTML pages without creating a chart at all.
Add the element to the renderer canvas.
Parameters
-
parent: Object
The element can be added to ag
(group) element.
Returns
- An Element object.
Apply attributes to the SVG/VML elements. These attributes for the most parts correspond
to SVG, but some are specific to Highcharts, like zIndex
and rotation
for text.
Most important available attributes:
- d
- The path definition for a
path
element. - end
- The end position of an arc.
- fill
- The fill or background color of a shape.
- height
- The height of rectangle elements.
- r
- The radius of an arc or circle.
- rotation
- The rotation of a text element.
- start
- The start position of an arc.
- stroke
- The stroke or border color of an element.
- stroke-width
- The stroke or border width of an element.
- style
- A serialized CSS string.
- text
- The text string of a text element.
- translateX
- The x translation of an element.
- translateY
- The Y translation of an element.
- visibility
- The visibility of the element. Can be 'visible' or 'hidden'.
- width
- The width of rectangle elements.
- x
- The x position of supported elements.
- y
- The y position of supported elements.
- zIndex
- The z index or vertical stacking of an element..
Parameters
-
hash: Object
A set of attributes to apply.
Returns
- An Element object.
Apply some CSS properties to the element
Parameters
-
hash: Object
The object literal of CSS properties to apply. Properties should be hyphenated, not camelCased.
Returns
- An Element object.
Destroy the element and free up memory
Returns
- null
Get the bounding box of the element
Returns
- A hash object containing x, y, width and height values for the element.
Apply an event handler to the element
Parameters
-
eventType: String
The event type to attach, for example 'click', 'mouseover', 'touch'. -
handler: Function
The event handler function.
Returns
- The element object
Bring the element to the front. Alternatively, a zIndex attribute can be given.
Returns
- The element object
The Chart object
The chart object is the JavaScript object representing a single chart in the web page.
The pointer to your chart object is returned when a chart is created using
the Highcharts.Chart()
constructor:
var chart1 = new Highcharts.Chart(options);
Methods
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 initiated, add the series as a configuration option instead.
Parameters
-
options: Object
The series options, as documented under plotOptions.series and under the plotOptions for each series type. -
redraw: Boolean
Defaults totrue
. Whether to redraw the chart after the series is added. See theredraw()
method below. -
animation: Mixed
Defaults to true. When true, the series' updating will be animated with default animation options. The animation can also be a configuration object with propertiesduration
andeasing
.
Returns
- The series added, if successful.
Removes the chart and purges memory. This method should be called before writing a new chart into the same container. It is called internally on window unload to prevent leaks.
Exporting module required. Submit an SVG version of the chart to a server along with some parameters for conversion.
Parameters
- options: Object
Exporting options. Out of the exporting options, the following options can be given as parameters to the exportChart method. All options default to the values given in the exporting config optins.filename
: the filename for the export without extension,url
: the URL for the server module to do the conversion,width
: the width of the PNG or JPEG image generated on the server,type
: the MIME type of the converted image. - chartOptions: Object
Additional chart options for the exported chart. For example a different background color can be added here.
Get an axis, series or point by its id
as given in the configuration options.
Parameters
-
id: String
The id of the axis, series or point to get.
Returns
- The first Axis, Series or Point with a matching id if found,
null
if not.
Returns an array of all currently selected points in the chart. Points can be selected either
programmatically by the point.select()
method or by clicking.
Returns
- An array of the selected points.
Returns an array of all currently selected series in the chart. Series can be selected either
programmatically by the series.select()
method or by checking the checkbox
next to the legend item if series.showCheckBox
is true.
Returns
- An array of the selected Series items.
Exporting module required. Get an SVG string representing the chart.
Parameters
- additionalOptions: Object
Chart options to add to the exported chart in addition to the options given for the original chart. For example if series.lineWidth should be greater in the exported chart than in the original, or the chart should have a different background color, this is added here.
Hide the loading screen. Options for the loading screen are defined at options.loading.
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 button at the upper left calls this method.
Redraw the chart after changes have been done to the data or axis extremes. 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.
The chart.redraw()
method only
redraws those parts of the chart that are actually changed. If the data of a series is
changed and it doesn't affect the axes, only the series itself is redrawn. If the new
data requires the axis extremes to be altered, the axis and all other series depending
on it are redrawn.
Resize the chart to a given width and height.
Parameters
-
width: Number
The new pixel width of the chart. -
height: Number
The new pixel height of the chart. -
animation: Mixed
Defaults to true. When true, the resize will be animated with default animation options. The animation can also be a configuration object with propertiesduration
andeasing
.
Set a new title or subtitle for the chart
Parameters
This method is deprecated as of 2.0.1. Updating the chart position after a move operation is no longer necessary.
Dim the chart's plot area and show a loading label text. Options for the loading screen are defined at options.loading. A custom text can be given as a parameter for loadind
Properties
chart.renderTo
.
chart.xAxis[0]
.
chart.yAxis[0]
.
The Axis object
A chart can have from 0 axes (pie chart) to multiples. In a normal, single series cartesian chart, there is one X axis and one Y axis.
The X axis or axes are referenced
by chart.xAxis
, which is an array of Axis objects. If there is only one
axis, it can be referenced through chart.xAxis[0]
, and multiple axes have
increasing indices. The same pattern goes for Y axes.
If you need to get the axes from a series object, use the series.xAxis
and
series.yAxis
properties. These are not arrays, as one series can only be associatedd
to one X and one Y axis.
A third way to reference the axis programmatically is by id. Add an id in the
axis configuration options, and get the axis by chart.get(id)
.
Configuration options for the axes are given in options.xAxis and options.yAxis.
Methods
Add a plot band after render time.
Parameters
- options: Object
A configuration object consisting of the same members as options.xAxis.plotBands
Add a plot line after render time.
Parameters
- options: Object
A configuration object consisting of the same members as options.xAxis.plotLines
Get the current extremes for the axis.
Returns
An object containing the following properties:
- dataMax: The maximum value of the axis' associated series.
- dataMin: The minimum value of the axis' associated series.
- max: The maximum axis value, either automatic or set manually. If
the
max
option is not set andmaxPadding
is 0, this value will be the same asdataMax
. - min: The minimum axis value, either automatic or set manually. If
the
min
option is not set andminPadding
is 0, this value will be the same asdataMin
.
Set new categories for the axis.
Parameters
- categories: Array
The new category names. - redraw: Boolean
Defaults totrue
. Whether to redraw the axis or wait for an explicit call tochart.redraw()
.
Set the minimum and maximum of the axes after render time. If the
startOnTick
and endOnTick
options are true,
the minimum and maximum values are rounded off to the nearest tick. To prevent
this, these options can be set to false before calling setExtremes.
Parameters
- min: Number
The new minimum value - max: Number
The new maximum value - redraw: Boolean
Defaults totrue
. Whether to redraw the chart or wait for an explicit call tochart.redraw()
. -
animation: Mixed
Defaults to true. When true, the resize will be animated with default animation options. The animation can also be a configuration object with propertiesduration
andeasing
.
Remove a plot band by its id
.
Parameters
- id: String
The plot band'sid
as given in the original configuration object or in the addPlotBand method.
Remove a plot line by its id
.
Parameters
- id: String
The plot line'sid
as given in the original configuration object or in the addPlotLine method.
The Series object
The Series object is the JavaScript representation of each line, area series, pie etc.
The object can be accessed in a number of ways. All series and point event handlers
give a reference to the series object. The chart
object has a series
property that is a collection of all the chart's series. The point
objects
also have the same reference.
Another way to reference the series programmatically is by id. Add an id in the
series configuration options, and get the series object by chart.get(id)
.
Configuration options for the series are given in three levels. Options for all series in a chart are given in the plotOptions.series object. Then options for all series of a specific type are given in the plotOptions of that type, for example plotOptions.line. Next, options for one single series are given in the series array.
Methods
Add a point to the series after render time.
Parameters
-
options: Number|Array|Object
The point options. If options is a single number, a point with that y value is appended to the series. If it is an array, it will be interpreted as x and y values respectively. If it is an object, advanced options as outlined under options.point are applied. -
redraw: Boolean
Defaults totrue
. Whether to redraw the chart after the point is added. When adding more than one point, it is highly recommended that theredraw
option be set to false, and insteadchart.redraw()
is explicitly called after the adding of points is finished. -
shift: Boolean
Defaults tofalse
. When shift is true, one point is shifted off the start of the series as one is appended to the end. Use this option for live charts monitoring a value over time. -
animation: Mixed
Defaults to true. When true, the graph will be animated with default animation options. The animation can also be a configuration object with propertiesduration
andeasing
.
Hides the series if visible. If the chart.ignoreHiddenSeries
option is true,
the chart is redrawn without this series.
Remove the series from the chart.
Parameters
-
redraw: Boolean
Defaults totrue
. Whether to redraw the chart after the series is removed. If doing more operations on the chart, it is a good idea to set redraw to false and callchart.redraw()
after.
Select or unselect the series. This means its selected
property is set,
the checkbox in the legend is toggled and when selected, the series is returned in the
chart.getSelectedSeries()
method.
Parameters
- selected: Boolean|null
Whentrue
, the series is selected. Whenfalse
it is unselected. Whennull
orundefined
, the series' selection state is toggled.
Apply a new set of data to the series and optionally redraw it.
Parameters
-
data: Array<Number>|Array<Array>|Array<Object>
Takes an array of data in the same format as given at options.series => data. -
redraw: Boolean
Defaults totrue
. Whether to redraw the chart after the series is altered. If doing more operations on the chart, it is a good idea to set redraw to false and callchart.redraw()
after.
Properties
series.select()
.
series.show()
,
series.hide()
, or the initial configuration.
The Point object
The Point object is the JavaScript representation of each data point
The object can be accessed in a number of ways. In all point event handlers the
point object is this
. In the series
object all the points
are accessed by the series.data
array.
Another way to reference the point programmatically is by id. Add an id in the
point configuration options, and get the point object by chart.get(id)
.
Methods
Remove the point from the series.
Parameters
-
redraw: Boolean
Defaults totrue
. Whether to redraw the chart after the point is removed. If doing more operations on the chart, it is a good idea to set redraw to false and callchart.redraw()
after. -
animation: Mixed
Defaults to true. When true, the graph's updating will be animated with default animation options. The animation can also be a configuration object with propertiesduration
andeasing
.
Select or unselect the point.
Parameters
-
select: Boolean
Whentrue
, the point is selected. Whenfalse
, the point is unselected. Whennull
orundefined
, the selection state is toggled. -
accumulate: Boolean
Whentrue
, the selection is added to other selected points. Whenfalse
, other selected points are deselected. Internally in Highcharts, selected points are accumulated on Control, Shift or Cmd clicking the point.
Slice out or set back in a pie chart slice. This is the default way of Highcharts to visualize that a pie point is selected.
Parameters
-
sliced: Boolean
Whentrue
, the point is sliced out. Whenfalse
, the point is set in. Whennull
orundefined
, the sliced state is toggled. -
redraw: Boolean
Defaults totrue
. Whether to redraw the chart after the point is altered. -
animation: Mixed
Defaults to true. When true, the move will be animated with default animation options. The animation can also be a configuration object with propertiesduration
andeasing
.
Update the point with new values.
Parameters
-
options: Number|Array|Object
The point options. If options is a single number, the point will be given that number as the y value. If it is an array, it will be interpreted as x and y values respectively. If it is an object, advanced options as outlined under options.point are applied. -
redraw: Boolean
Defaults totrue
. Whether to redraw the chart after the point is updated. If doing more operations on the chart, it is a good idea to set redraw to false and callchart.redraw()
after. -
animation: Mixed
Defaults to true. When true, the update will be animated with default animation options. The animation can also be a configuration object with propertiesduration
andeasing
.