chart
Options regarding the chart area and plot area as well as general chart options.
alignTicks
Boolean
true
When using multiple axis, the ticks of two or more opposite axes will
automatically be aligned by adding ticks to the axis or axes with the least
ticks. This can be prevented by setting
alignTicks to false.
If the grid lines look messy, it's a good idea to hide them for the
secondary axis by setting gridLineWidth to 0.
backgroundColor
Color
"#FFFFFF"
The background color or gradient for the outer chart area.
borderColor
Color
"#4572A7"
The color of the outer chart border. The border is painted using vector graphic
techniques to allow rounded corners.
borderWidth
Number
0
The pixel width of the outer chart border. The border is painted using vector graphic
techniques to allow rounded corners.
className
String
""
A CSS class name to apply to the charts container
div, allowing unique CSS styling
for each chart.
defaultSeriesType
String
"line"
The default series type for the chart. Can be one of line, spline, area, areaspline,
column, bar, pie and scatter.
events
chart.events
Event listeners for chart events.
height
Number
null
An explicit height for the chart. By default the height is calculated from the offset
height of the containing element.
ignoreHiddenSeries
Boolean
true
Since 1.2.0
If true, the axes will scale to the remaining visible series once one series
is hidden. If false, hiding and showing a series will not affect the axes or
the other series. For stacks, once one series within the stack is hidden, the
rest of the stack will close in around it even if the axis is not affected.
inverted
Boolean
false
Whether to invert the axes so that the x axis is horizontal and y axis is vertical.
When true, the x axis is reversed by default. If a bar plot is present in the chart,
it will be inverted automatically.
margin
Array
[50, 50, 70, 80]
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.
marginTop
Number
50
Since 2.0
The margin between the top outer edge of the chart and the plot area.
marginRight
Number
50
Since 2.0
The margin between the right outer edge of the chart and the plot area.
marginBottom
Number
70
Since 2.0
The margin between the bottom outer edge of the chart and the plot area.
marginLeft
Number
80
Since 2.0
The margin between the left outer edge of the chart and the plot area.
plotBackgroundImage
String
null
The URL for an image to use as the plot background. To set an image as the background
for the entire chart, set a CSS background image to the container element.
plotShadow
Boolean
false
Whether to apply a drop shadow to the plot area. Requires that plotBackgroundColor
be set.
renderTo
String|Object
null
The HTML element where the chart will be rendered. If it is a string, the element by that
id is used. The HTML element can also be passed by direct reference.
shadow
Boolean
false
Whether to apply a drop shadow to the outer chart area. Requires that
backgroundColor be set.
showAxes
Boolean
false
1.2.5
Whether to show the axes initially. This only applies to empty charts where
series are added dynamically,
as axes are automatically added to cartesian series.
style
CSSObject
Additional CSS styles to apply inline to the container
div. Defaults
to:
style: {
fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font
fontSize: '12px'
}
width
Number
null
An explicit width for the chart. By default the width is calculated from the offset
width of the containing element.
zoomType
String
""
Decides in what dimentions the user can zoom by dragging the mouse. Can
be one of
x, y or xy.
chart.events
Event listeners for the chart.
addSeries
Function
Since 1.2.0
Fires when a series is added to the chart after load time, using the
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.
click
Function
Since 1.2.0
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
)
}
load
Function
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.
redraw
Function
Since 1.2.0
Fires when the chart is redrawn, either after a call to chart.redraw() or after
an axis, series or point is modified with the
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.
selection
Function
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
The chart's main title.
align
String
"center"
Since 2.0
The horizontal alignment of the title. Can be one of "left", "center" and "right".
text
String
"Chart title"
The title of the chart. To disable the title, set the
text to null.
style
CSSObject
CSS styles for the title. Use this for font styling, but use
align,
x and yfor text alignment. Defaults to:
{
color: '#3E576F',
fontSize: '16px'
}
x
Number
0
Since 2.0
The x position of the title relative to the alignment.
y
Number
20
Since 2.0
The y position of the title relative to the top of the chart.
subtitle
The chart's subtitle
align
String
"center"
Since 2.0
The horizontal alignment of the subtitle. Can be one of "left", "center" and "right".
style
CSSObject
CSS styles for the title. Exact positioning of the title can be achieved
by changing the margin property, or by adding
position: "absolute" and
left and top properties. Defaults to:
{
color: '#3E576F'
}
x
Number
0
Since 2.0
The x position of the subtitle relative to the alignment.
y
Number
20
Since 2.0
The y position of the subtitle relative to the top of the chart.
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.
allowDecimals
Boolean
true
Since 2.0
Whether to allow decimals in this axis' ticks. When counting integers, like
persons or hits on a web page, decimals must be avoided in the axis tick
labels.
True by default (unwanted for this
type of data),
false
alternateGridColor
Color
null
When using an alternate grid color, a band is painted across the plot area
between every other grid line.
categories
Array
[]
If categories are present for the xAxis, names are used instead of numbers for that
axis. Example:
categories: ['Apples', 'Bananas', 'Oranges']
dateTimeLabelFormats
Object
For a datetime axis, the scale will automatically adjust to the appropriate unit.
This member gives the default string representations used for each unit. For an
overview of the replacement codes, see dateFormat.
Defaults to:
{
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b '%y',
year: '%Y'
}
endOnTick
Boolean
false
Since 1.2.0
Whether to force the axis to end on a tick. Use this option with the
maxPadding
option to control the axis end.
True by default and
false for Y axis
events
xAxis.events
Since 1.2.0
A collection of event handlers.
gridLineColor
Color
"#C0C0C0"
Color of the grid lines extending the ticks across the plot area.
gridLineWidth
Number
0
The width of the grid lines extending the ticks across the plot area.
id
String
null
Since 1.2.0
An id for the axis. This can be used after render time to get a pointer
to the axis object through
chart.get().
labels
xAxis.labels
Configuration object for the axis labels, usually displaying the number
for each tick.
linkedTo
Number
null
Since 2.0.2
Index of another axis that this axis is linked to. When an axis is linked to
a master axis, it will take the same extremes as the master, but as assigned by
min or max or by setExtremes. It can be used to show additional info, or to ease
reading the chart by duplicating the scales.
max
Number
null
The maximum value of the axis. If
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.
maxPadding
Number
0.01
Since 1.2.0
Padding of the max value relative to the length of the axis. A padding of 0.05 will make
a 100px axis 5px longer. This is useful when you don't want the highest data
value to appear on the edge of the plot area. When the axis'
max
option is set or a max extreme is set using axis.setExtremes(),
the maxPadding will be ignored.
maxZoom
Number
1
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.
min
Number
null
The minimum value of the axis. If
null the min value is
automatically calculated. If the startOnTick option is
true, the min value might be rounded down.
minorGridLineColor
Color
#E0E0E0
Color of the minor, secondary grid lines.
minorTickInterval
Number
null
Tick interval in scale units for the minor ticks. If
"auto",
the minor tick interval is calculated as a fifth of the tickInterval. If
null, minor ticks are not shown.
minorTickPosition
String
outside
The position of the minor tick marks relative to the axis line. Can be
one of
inside and outside.
minPadding
Number
0.01
Since 1.2.0
Padding of the min value relative to the length of the axis. A padding of 0.05 will make
a 100px axis 5px longer. This is useful when you don't want the lowest data
value to appear on the edge of the plot area. When the axis'
min
option is set or a min extreme is set using axis.setExtremes(),
the minPadding will be ignored.
offset
Number
0
The distance in pixels from the plot area to the axis line. A positive offset
moves the axis with it's line, labels and ticks away from the plot area. This
is typically used when two or more axes are displayed on the same side of the
plot.
opposite
Boolean
false
Whether to display the axis on the opposite side of the normal. The normal
is on the left side for vertical axes and bottom for horizontal, so the opposite
sides will be right and top respectively. This is typically used with dual or
multiple axes.
plotBands
Array.<plotBand>
null
An array of configuration objects for plot bands colouring parts of the
plot area background.
plotLines
Array.<plotLine>
null
An array of configuration objects for plot lines marking specific values in
the plot area.
reversed
Boolean
false
Whether to reverse the axis so that the highest number is closest to origo.
If the chart is inverted, the x axis is reversed by default.
startOfWeek
Number
1
For datetime axes, this decides where to put the tick between
weeks. 0 = Sunday, 1 = Monday.
startOnTick
Boolean
false
Since 1.2.0
Whether to force the axis to start on a tick. Use this option with the
maxPadding
option to control the axis start.
False by default,
true on X axis
tickInterval
Mixed
null
The interval of the tick marks in axis units. When
null, the tick interval
is computed to approximately follow the tickPixelInterval. Not applicable to
categorized axis. Note that datetime axes are based on milliseconds, so for
example an interval of one day is expressed as 24 * 3600 * 1000.
tickmarkPlacement
String
"between"
For categorized axes only. If "on" the tick mark is placed in the center of
the category, if "between" the tick mark is placed between categories.
tickPixelInterval
Number
If tickInterval is
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.
tickPosition
String
"outside"
The position of the major tick marks relative to the axis line. Can be
one of
inside and outside.
"outside" by default,
"inside" on X axis
title
xAxis.title
Configuration object for the axis title.
type
String
"linear"
The type of axis. Can be one of "linear" or "datetime". In a datetime
axis, the numbers are given in milliseconds, and tick marks are placed
on appropriate values like full hours or days.
"linear",
"datetime" X axis
xAxis.events
Event handlers for the axis.
setExtremes
Function
Since 1.2.0
Fires when the minimum and maximum is set for the axis, either by calling the
.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
The axis labels show the number or category for each tick.
align
String
"center"
What part of the string the given position is anchored to.
Can be one of
"left",
"center" or "right". In inverted charts,
x axis label alignment and y axis alignment are swapped.
formatter
Function
Callback JavaScript function to format the label. The value is
given by
this.value. Defaults to:
function() {
return this.value;
}
style
CSSObject
CSS styles for the label. Defaults to:
style: {
color: '#6D869F',
fontWeight: 'bold'
}
x
Number
0
The x position offset of the label relative to the tick position
on the axis.
y
Number
0
The y position offset of the label relative to the tick position
on the axis.
xAxis.plotBands
A colored band stretching across the plot area marking an interval on the axis.
from
Number
null
The start position of the plot band in axis units.
id
String
null
An id used for identifying the plot band in Axis.removePlotBand.
xAxis.plotLines
A line streching across the plot area, marking a specific value on one of the axes.
id
String
null
An id used for identifying the plot line in Axis.removePlotLine.
xAxis.title
The axis title, showing next to the axis line.
align
String
"middle"
Alignment of the title relative to the axis values. Possible values
are "low", "middle" or "high".
margin
Number
35
The pixel distance between the axis line and the title. Positive
values are outside the axis line, negative are inside.
Y axis title margin of 60
to make room for longer axis labels
rotation
Number
0
The rotation of the text in degrees. 0 is horizontal, 270 is vertical
reading from bottom to top.
Horizontal Y axis title
style
CSSObject
CSS styles for the title. When titles are rotated they are rendered using
vector graphic techniques and not all styles are applicable. Most noteworthy,
a bug in IE8 renders all rotated strings bold and italic. Defaults to:
style: {
color: '#6D869F',
fontWeight: 'bold'
}
Red Y axis title
text
String
null
The actual text of the axis title. It can contain basic HTML text markup like
<b>, <i> and spans with style.
Custom HTML title for X axis
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.
endOnTick
Boolean
true
Since 1.2.0
Whether to force the axis to end on a tick. Use this option with the
maxPadding
option to control the axis end.
True by default and
false for Y axis
gridLineWidth
Number
1
The width of the grid lines extending the ticks across the plot area.
maxPadding
Number
0.05
Since 1.2.0
Padding of the max value relative to the length of the axis. A padding of 0.05 will make
a 100px axis 5px longer. This is useful when you don't want the highest data
value to appear on the edge of the plot area.
minPadding
Number
0.05
Since 1.2.0
Padding of the min value relative to the length of the axis. A padding of 0.05 will make
a 100px axis 5px longer. This is useful when you don't want the lowest data
value to appear on the edge of the plot area.
startOnTick
Boolean
true
Since 1.2.0
Whether to force the axis to start on a tick. Use this option with the
maxPadding
option to control the axis start.
False by default,
true on X axis
yAxis.events
Extends xAxis.events
yAxis.labels
Extends xAxis.labels
align
String
"right"
What part of the string the given position is anchored to.
Can be one of
"left", "center" or "right".
"left" on Y axis
x
Number
-8
The x position offset of the label relative to the tick position on the axis.
y
Number
3
The y position offset of the label relative to the tick position on the axis.
yAxis.title
Extends xAxis.title
margin
Number
40
The pixel distance between the axis line and the title. Positive
values are outside the axis line, negative are inside.
Y axis title margin of 60
to make room for longer axis labels
rotation
Number
270
The rotation of the text in degrees. 0 is horizontal, 270 is
vertical reading from bottom to top.
Horizontal Y axis title
text
String
"Y-values"
The actual text of the axis title. Horizontal texts can contain HTML,
but rotated texts are painted using vector techniques and must be
clean text. The Y axis title is disabled by setting the
text
option to null.
Custom HTML title for X axis
yAxis.plotBands
Extends xAxis.plotBands
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.
area
plotOptions.area
Area plot options
areaspline
plotOptions.areaspline
Areaspline plot options
bar
plotOptions.bar
Bar chart options
column
plotOptions.column
Column chart options
line
plotOptions.line
Line chart options
pie
plotOptions.pie
Pie chart options
series
plotOptions.series
Since 1.2.0
General options for all series regardless of type.
scatter
plotOptions.scatter
Scatter chart options
spline
plotOptions.spline
Spline chart options
plotOptions.series
General options for all series types.
allowPointSelect
Boolean
false
Since 1.2.0
Allow this series' points to be selected by clicking on the markers, bars or pie slices.
animation
Boolean
true
Enable or disable the initial animation when a series is displayed.
color
String
The main color or the series. In line type series it applies to the line and the point
markers unless otherwise specified. In bar type series it applies to the bars
unless a color is specified per point. The default value is pulled from the
options.colors array.
cursor
String
''
You can set the cursor to "pointer" if you have click events attached to
the series, to signal to the user that the points and lines can be clicked.
dataLabels
plotOptions.series.dataLabels
Defines the appearance of the data labels, static labels for each point.
enableMouseTracking
Boolean
true
Enable or disable the mouse tracking for a specific series. This includes
point tooltips and click events on graphs and points. For large datasets
it improves performance.
events
plotOptions.series.events
Event listeners for the series.
id
String
null
Since 1.2.0
An id for the series. This can be used after render time to get a pointer
to the series object through
chart.get().
marker
plotOptions.series.marker
Defines the appearance of the point markers.
point
plotOptions.series.point
pointStart
Number
0
If no x values are given for the points in a series, pointStart defines
on what value to start. For example, if a series contains one yearly value
starting from 1945, set pointStart to 1945.
pointInterval
Number
1
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.
selected
Boolean
false
Since 1.2.0
Whether to select the series initially. If
showCheckbox is true,
the checkbox next to the series name will be checked for a selected series.
showCheckbox
Boolean
false
Since 1.2.0
If true, a checkbox is displayed
next to the legend item to allow selecting the series. The state of the
checkbox is determined by the
selected option.
showInLegend
Boolean
true
Whether to display this particular series or series type in the legend.
stacking
String
null
Whether to stack the values of each series on top of each other. Possible values
are null to disable, "normal" to stack by value or "percent".
states
plotOptions.series.states
A wrapper object for all the series options in specific states.
stickyTracking
Boolean
true
2.0
Sticky tracking of mouse events. When true, the
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.
visible
Boolean
true
Set the initial visibility of the series.
plotOptions.series.marker
enabled
Boolean
true
Enable or disable the point marker.
fillColor
Color
null
The fill color of the point marker. When
null, the series' or point's color
is used.
lineColor
Color
"#FFFFFF"
The color of the point marker's outline. When
null, the series' or point's color
is used.
states
plotOptions.series.marker.states
Interaction states for the point marker.
symbol
String
null
A predefined shape or symbol for the marker. When null, the symbol is pulled from
options.symbols. Other possible values are "circle", "square", "diamond", "triangle"
and "triangle-down". Additionally, the URL to a graphic can be given on this form:
"url(graphic.png)".
Properties for each single point
plotOptions.series.point
events
plotOptions.series.point.events
Events for each single point
Events for each single point
plotOptions.series.point.events
click
Function
Fires when a point is clicked. The
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.
mouseOver
Function
Fires when the mouse enters the area close to the point. The
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.
mouseOut
Function
Fires when the mouse leaves the area close to the point. The
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
Function
Since 1.2.0
Fires when the point is removed using the
.remove() method. The this keyword refers to the
point object itself. One parameter, event, is passed to the function.
Returning false cancels the operation.
select
Function
Since 1.2.0
Fires when the point is selected either programatically or following a click
on the point. The
this keyword refers to the
point object itself. One parameter, event, is passed to the function.
Returning false cancels the operation.
unselect
Function
Since 1.2.0
Fires when the point is unselected either programatically or following a click
on the point. The
this keyword refers to the
point object itself. One parameter, event, is passed to the function.
Returning false cancels the operation.
update
Function
Since 1.2.0
Fires when the point is updated programmatically through the
.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
hover
plotOptions.series.marker.states.hover
Configuration options for the hovered point marker. Members are
inherited from the default line configuration, but single members can be overridden.
select
plotOptions.series.marker.states.select
Configuration options for the selected point marker. Members are
inherited from the default line configuration, but single members can be overridden.
plotOptions.series.marker.states.hover
fillColor
Color
null
The fill color of the point marker. When
null, the series' or point's color
is used.
lineColor
Color
"#FFFFFF"
The color of the point marker's outline. When
null, the series' or point's color
is used.
radius
Number
The radius of the point marker. In hover state, it defaults
to the normal state's radius + 2.
plotOptions.series.marker.states.select
The appearance of the point marker when selected. In order to allow a point to be
selected, set the
series.allowPointSelect option to true.
fillColor
Color
null
The fill color of the point marker. When
null, the series' or point's color
is used.
lineColor
Color
"#000000"
The color of the point marker's outline. When
null, the series' or point's color
is used.
radius
Number
The radius of the point marker. In hover state, it defaults
to the normal state's radius + 2.
plotOptions.series.dataLabels
Extends xAxis.labels
align
String
"center"
The alignment of the data label compared to the point. Can be
one of "left", "center" or "right".
formatter
Function
Callback JavaScript function to format the data label. Available data are:
this.x: The x value.
this.y: The y value.
this.series: The series object. The series name is available
through this.series.name.
this.point: The point object. The point name, if defined, is available
through this.point.name.
formatter: function() {
return this.y;
}
plotOptions.series.events
click
Function
Fires when the series is clicked. The
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.
checkboxClick
Function
Since 1.2.0
Fires when the checkbox next to the series' name in the legend is clicked.. The
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
Function
Since 1.2.0
Fires when the series is hidden after chart generation time, either by clicking
the legend item or by calling
.hide().
legendItemClick
Function
Fires when the legend item belonging to the series is clicked.
The
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().
mouseOver
Function
Fires when the mouse enters the graph. The
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.
Log mouse over and out with sticky tracking
by default,
without sticky tracking
mouseOut
Function
Fires when the mouse leaves the graph. The
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.
Log mouse over and out with sticky tracking
by default,
without sticky tracking
show
Function
Since 1.2.0
Fires when the series is shown after chart generation time, either by clicking
the legend item or by calling
.show().
plotOptions.series.states
hover
plotOptions.series.states.hover
Configuration options for the hovered line. Members are
inherited from the default line configuration, but single members can be overridden.
plotOptions.series.states.hover
enabled
Boolean
false
1.2
Enable separate styles for the hovered series to visualize that the user hovers
either the series itself or the legend. Enabling it has a performance penalty
as it requires that a second layer be drawn as a double buffer. This means twice
as much graphics to draw for each plot, which can make a great difference for
charts with a high number of series or points.
marker
plotOptions.series.marker
Defines the appearance of the point markers.
plotOptions.series.states.hover.marker
Extends plotOptions.series.marker
states
plotOptions.line
Extends plotOptions.series
plotOptions.line.marker
Extends plotOptions.series.marker
plotOptions.line.marker.states
Extends plotOptions.series.marker.states
plotOptions.line.marker.states.hover
Extends plotOptions.series.marker.states.hover
plotOptions.line.marker.states.select
Extends plotOptions.series.marker.states.select
plotOptions.line.dataLabels
Extends plotOptions.series.dataLabels
plotOptions.line.events
Extends plotOptions.series.events
plotOptions.line.point
Extends plotOptions.series.point
plotOptions.line.point.events
Extends plotOptions.series.point.events
plotOptions.line.states
Extends plotOptions.series.states
plotOptions.line.states.hover
Extends plotOptions.series.states.hover
plotOptions.line.states.hover.marker
Extends plotOptions.series.states.hover.marker
plotOptions.spline
Extends plotOptions.series
plotOptions.spline.marker
Extends plotOptions.series.marker
plotOptions.spline.marker.states
Extends plotOptions.series.marker.states
plotOptions.spline.marker.states.hover
Extends plotOptions.series.marker.states.hover
plotOptions.spline.marker.states.select
Extends plotOptions.series.marker.states.select
plotOptions.spline.dataLabels
Extends plotOptions.series.dataLabels
plotOptions.spline.events
Extends plotOptions.series.events
plotOptions.spline.point
Extends plotOptions.series.point
plotOptions.spline.point.events
Extends plotOptions.series.point.events
plotOptions.spline.states
Extends plotOptions.series.states
plotOptions.spline.states.hover
Extends plotOptions.series.states.hover
plotOptions.spline.states.hover.marker
Extends plotOptions.series.states.hover.marker
plotOptions.scatter
Extends plotOptions.series
plotOptions.scatter.marker
Extends plotOptions.series.marker
plotOptions.scatter.marker.states
Extends plotOptions.series.marker.states
plotOptions.scatter.marker.states.hover
Extends plotOptions.series.marker.states.hover
plotOptions.scatter.marker.states.select
Extends plotOptions.series.marker.states.select
plotOptions.scatter.dataLabels
Extends plotOptions.series.dataLabels
plotOptions.scatter.events
Extends plotOptions.series.events
plotOptions.scatter.point
Extends plotOptions.series.point
plotOptions.scatter.point.events
Extends plotOptions.series.point.events
plotOptions.scatter.states
Extends plotOptions.series.states
plotOptions.scatter.states.hover
Extends plotOptions.series.states.hover
lineWidth
Number
0
The width of the line connecting the data points.
plotOptions.scatter.states.hover.marker
Extends plotOptions.series.states.hover.marker
plotOptions.area
Extends plotOptions.series
fillColor
Color
null
Fill color or gradient for the area. When
null, the series' color is
used with the series' fillOpacity.
lineColor
Color
null
A separate color for the graph line. By default the line takes the
color
of the series, but the lineColor setting allows setting a separate
color for the line without altering the fillColor.
threshold
Number
0
2.0
The Y axis value to serve as the base for the area, for distinguishing
between values above and below a threshold.
plotOptions.area.marker
Extends plotOptions.series.marker
plotOptions.area.marker.states
Extends plotOptions.series.marker.states
plotOptions.area.marker.states.hover
Extends plotOptions.series.marker.states.hover
plotOptions.area.marker.states.select
Extends plotOptions.series.marker.states.select
plotOptions.area.dataLabels
Extends plotOptions.series.dataLabels
plotOptions.area.events
Extends plotOptions.series.events
plotOptions.area.point
Extends plotOptions.series.point
plotOptions.area.point.events
Extends plotOptions.series.point.events
plotOptions.area.states
Extends plotOptions.series.states
plotOptions.area.states.hover
Extends plotOptions.series.states.hover
plotOptions.area.states.hover.marker
Extends plotOptions.series.states.hover.marker
plotOptions.areaspline
Extends plotOptions.area
plotOptions.areaspline.marker
Extends plotOptions.area.marker
plotOptions.areaspline.marker.states
Extends plotOptions.area.marker.states
plotOptions.areaspline.marker.states.hover
Extends plotOptions.area.marker.states.hover
plotOptions.areaspline.marker.states.select
Extends plotOptions.area.marker.states.select
plotOptions.areaspline.dataLabels
Extends plotOptions.area.dataLabels
plotOptions.areaspline.events
Extends plotOptions.area.events
plotOptions.areaspline.point
Extends plotOptions.area.point
plotOptions.areaspline.point.events
Extends plotOptions.area.point.events
plotOptions.areaspline.states
Extends plotOptions.area.states
plotOptions.areaspline.states.hover
Extends plotOptions.area.states.hover
plotOptions.areaspline.states.hover.marker
Extends plotOptions.area.states.hover.marker
plotOptions.column
Extends plotOptions.series
borderRadius
Number
0
The corner radius of the border surronding each column or bar.
colorByPoint
Boolean
false
2.0
When using automatic point colors pulled from the
options.colors
collection, this option determines whether the chart should receive
one color per series or one color per point.
groupPadding
Number
0.2
Padding between each value groups, in x axis units.
minPointLength
Number
0
The minimal height for a column or width for a bar. By default, 0 values
are not shown. To visualize a 0 (or close to zero) point, set the minimal point length to a
pixel value like 3.
Set to three with zero base value,
positive and negative close to zero values
pointPadding
Number
0.1
Padding between each column or bar, in x axis units.
pointWidth
Number
null
1.2.5
A pixel value specifying a fixed width for each column or bar. When
null,
the width is calculated from the pointPadding and groupPadding.
plotOptions.column.dataLabels
Extends plotOptions.series.dataLabels
plotOptions.column.events
Extends plotOptions.series.events
plotOptions.column.point
Extends plotOptions.series.point
plotOptions.column.point.events
Extends plotOptions.series.point.events
plotOptions.column.states
Extends plotOptions.series.states
plotOptions.column.states.hover
Extends plotOptions.series.states.hover
brightness
Number
0.1
How much to brighten the point on interaction. Requires the main color to be defined in hex or rgb(a) format.
plotOptions.column.states.hover.marker
Extends plotOptions.series.states.hover.marker
plotOptions.bar
Extends plotOptions.column
plotOptions.bar.dataLabels
Extends plotOptions.column.dataLabels
align
String
"left"
Alignment of the data label relative to the data point.
plotOptions.bar.events
Extends plotOptions.column.events
plotOptions.bar.point
Extends plotOptions.column.point
plotOptions.bar.point.events
Extends plotOptions.column.point.events
plotOptions.bar.states
Extends plotOptions.column.states
plotOptions.bar.states.hover
Extends plotOptions.column.states.hover
plotOptions.bar.states.hover.marker
Extends plotOptions.column.states.hover.marker
plotOptions.pie
Extends plotOptions.series
center
Array<String>
['50%', '50%']
The center of the pie chart relative to the plot area. Can be percentages
or pixel values.
innerSize
String|Number
0
2.0
The size of the inner diameter for the pie. A size greater than 0
renders a donut chart. Can be a percentage
or pixel value. Percentages are relative to the size of the plot area.
Pixel values are given as integers.
shadow
Not implemented for pies
size
String|Number
"90%"
The diameter of the pie relative to the plot area. Can be a percentage
or pixel value. Pixel values are given as integers.
slicedOffset
Number
10
If a point is sliced, moved out from the center, how many pixels should
it be moved?
plotOptions.pie.dataLabels
Extends plotOptions.series.dataLabels
plotOptions.pie.events
Extends plotOptions.series.events
legendItemClick
Function
1.2.0
Not applicable to pies, as the legend item is per point. See point.events.
plotOptions.pie.point
Extends plotOptions.series.point
plotOptions.pie.point.events
Extends plotOptions.series.point.events
legendItemClick
Function
1.2.0
Fires when the legend item belonging to the pie point (slice) is clicked.
The
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
brightness
Number
.1
How much to brighten the point on interaction. Requires the main color to be defined in hex or rgb(a) format.
plotOptions.pie.states.hover.marker
Extends plotOptions.series.states.hover.marker
labels
HTML labels that can be positioined anywhere in the chart area.
items
Array<labels.item>
An array containing configuration for each label.
style
CSSObject
Shared CSS styles for all labels. Defaults to:
style: {
color: '#3E576F'
}
labels.items
A HTML label that can be positioined anywhere in the chart area.
html
String
""
Inner HTML or text for the label.
style
CSSObject
CSS styles for each label. To position the label, use left and top like this:
style: {
left: '100px',
top: '100px'
}
legend
The legend is a box containing a symbol and name for each series item
or point item in the chart.
align
String
"center"
Since 2.0
The horizontal alignment of the legend box within the chart area.
backgroundColor
Color
null
The background color of the legend, filling the rounded corner border.
itemHiddenStyle
CSSObject
CSS styles for each legend item when the corresponding series or point
is hidden. Properties are inherited
from
style unless overridden here. Defaults to:
itemHiddenStyle: {
color: '#CCC'
}
itemHoverStyle
CSSObject
CSS styles for each legend item in hover mode. Properties are inherited
from
style unless overridden here. Defaults to:
itemHoverStyle: {
color: '#000'
}
itemStyle
CSSObject
CSS styles for each legend item. Defaults to:
itemStyle: {
cursor: 'pointer',
color: '#3E576F'
}
itemWidth
Number
null
Since 2.0
The width for each legend item. This is useful in a horizontal layout with
many items when you want the items to align vertically.
layout
String
"horizontal"
The layout of the legend items. Can be one of "horizontal" or "vertical".
labelFormatter
Function
Callback function to format each of the series' labels. The this
keyword refers to the series object, or the point object in case of pie charts.
Defaults to:
labelFormatter: function() {
return this.name
}
reversed
Boolean
false
1.2.5
Whether to reverse the order of the legend items compared to the order
of the series or points as defined in the configuration object.
shadow
Boolean
false
Whether to apply a drop shadow to the legend. A
backgroundColor
also needs to be applied for this to take effect.
style
CSSObject
CSS styles for the legend area. In the 1.x versions the position of the legend area
was determined by CSS. In 2.x, the position is determined by properties like
align, verticalAlign, x and y,
but the styles are still parsed for backwards compatibility.
symbolPadding
Number
5
The pixel padding between the legend item symbol and the legend item text.
verticalAlign
String
"bottom"
Since 2.0
The vertical alignment of the legend box. Can be one of "top", "middle" or
"bottom". Vertical position can be further determined by the
y
option.
width
Number
null
Since 2.0
The width of the legend box, not including style.padding.
x
Number
15
Since 2.0
The x offset of the legend relative to it's horizontal alignment
align. 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.
y
Number
0
Since 2.0
The vertical offset of the legend relative to it's vertical alignment
verticalAlign. Negative
y moves it up, positive y moves it down.
loading
The loading options control the appearance of the loading screen that covers the
plot area on chart operations. This screen only appears after an explicit call
to
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.
hideDuration
Number
100
Since 1.2.0
The duration in milliseconds of the fade out effect.
labelStyle
CSSObject
Since 1.2.0
CSS styles for the loading label
span. Defaults to:
labelStyle: {
fontWeight: 'bold',
position: 'relative',
top: '1em'
}
showDuration
Number
100
Since 1.2.0
The duration in milliseconds of the fade in effect.
style
CSSObject
Since 1.2.0
CSS styles for the loading screen that covers the plot area. Defaults to:
style: {
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
textAlign: 'center'
}
tooltip
Options for the tooltip that appears when the user hovers over a series or point.
backgroundColor
Color
"rgba(255, 255, 255, .85)"
The background color or gradient for the tooltip.
borderColor
Color
"auto"
The color of the tooltip border. When
null, the border takes the color of the
corresponding series or point.
borderWidth
Number
2
The pixel width of the tooltip border.
formatter
Function
Callback function to format the HTML of the tooltip. Return false to disable
tooltip for a specific point on series. Available data are:
Default value:
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.point ? this.point.name : this.series.name) +'
'+
'X value: '+ this.x +'
'+
'Y value: '+ this.y;
}
snap
Number
10
Since 1.2.0
Proximity snap for graphs or single points. Does not apply to bars, columns
and pie slices.
style
CSSObject
CSS styles for the tooltip. The tooltip can also be styled through the CSS
class
.highcharts-tooltip.
Default value:
style: {
color: '#333333',
fontSize: '9pt',
padding: '5px'
}
credits
Highchart by default puts a credits label in the lower right corner of the chart.
This can be changed using these options.
style
CSSObject
CSS styles for the credits label. Defaults to:
itemStyle: {
cursor: 'pointer',
color: '#909090',
fontSize: '10px'
}
global
Global options that don't apply to each chart. These options, like the
lang
options, must be set using the Highcharts.setOptions method.
Highcharts.setOptions({
global: {
useUTC: false
}
});
useUTC
Boolean
true
Whether to use UTC time for axis scaling, tickmark placement and time display in
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.
True by default - the starting point which is
at 00:00 UTC, is displayed as 00:00 in the axis labels and in the tooltip.
False - the starting point which is
at 00:00 UTC, is displayed as your local browser time in the axis labels and in
the tooltip.
colors
An array containing the default colors for the chart's series. When all
colors are used, new colors are pulled from the start again. Defaults to:
colors: [ '#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92' ]
symbols
An array containing the default symbols for the series point markers. When all
symbols are used, new symbols are pulled from the start again. Defaults to:
symbols: [ 'circle', 'diamond', 'square', 'triangle', 'triangle-down' ]
lang
Language object. The language object is global and it can't
be set on each chart initiation. Instead, use
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']
}
});
decimalPoint
String
"."
1.2.2
The default decimal point used in the
Highcharts.numberFormat method
unless otherwise specified in the function arguments.
downloadPNG
String
"Download PNG image"
Since 2.0
Exporting module only. The text for the PNG download menu item.
downloadJPEG
String
"Download JPEG image"
Since 2.0
Exporting module only. The text for the JPEG download menu item.
downloadPDF
String
"Download PDF document"
Since 2.0
Exporting module only. The text for the PDF download menu item.
downloadSVG
String
"Download SVG vector image"
Since 2.0
Exporting module only. The text for the SVG download menu item.
exportButtonTitle
String
"Export to raster or vector image"
Since 2.0
Exporting module only. The tooltip text for the export button.
loading
String
Loading...
The loading text that appears when the chart is set into the loading state
following a call to
chart.showLoading.
months
Array<String>
['January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December']
An array containing the months names.
printButtonTitle
String
"Print the chart"
Since 2.0
Exporting module only. The tooltip text for the print button.
resetZoom
String
Reset zoom
1.2.4
The text for the label appearing when a chart is zoomed.
resetZoomTitle
String
Reset zoom level 1:1
1.2.4
The tooltip title for the label appearing when a chart is zoomed.
thousandsSep
String
","
1.2.2
The default thousands separator used in the
Highcharts.numberFormat method
unless otherwise specified in the function arguments.
weekdays
Array<String>
['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
An array containing the weekday names.
series
The actual series to append to the chart. In addition to
the members listed below, any member of the
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.
data
Array<Mixed>
""
An array of data points for the series. The points can be given in three ways:
- 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
pointStartandpointIntervalgiven 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 }]
dataParser
Function
This method is deprecated as of version 2.0. Instead, use options preprocessing
as described in the
how-to, section #3.
dataURL
String
null
This method is deprecated as of version 2.0. Instead, load the data
using jQuery.ajax and use options preprocessing
as described in the
how-to, section #3.
type
String
"line"
The type of series. Can be one of
area, areaspline,
bar, column, line, pie,
scatter or spline.
xAxis
Number
0
When using dual or multiple x axes, this number defines which xAxis the particular
series is connected to. It refers to the index of the axis in the xAxis array, with
0 being the first.
yAxis
Number
0
When using dual or multiple y axes, this number defines which yAxis the particular
series is connected to. It refers to the index of the axis in the yAxis array, with
0 being the first.
point
Config options for the individual point as given in series.data.
events
plotOptions.series.point.events
null
Individual events for the point.
id
String
null
Since 1.2.0
An id for the point. This can be used after render time to get a pointer
to the point object through
chart.get().
marker
plotOptions.series.marker
null
An individual point marker for the point.
sliced
Boolean
false
Pie series only. Whether to display a slice offset from the center.
x
Number
null
The x value of the point
y
Number
null
The y value of the point
point.events
Extends plotOptions.series.point.events
point.marker
Extends plotOptions.series.marker
navigation
A collection of options for buttons and menus appearing in the exporting module.
menuStyle
CSSObject
Since 2.0
CSS styles for the popup menu appearing by default when the export icon is
clicked. This menu is rendered in HTML. Defaults to
menuStyle: {
border: '1px solid #A0A0A0',
background: '#FFFFFF'
}
menuItemStyle
CSSObject
Since 2.0
CSS styles for the individual items within the popup menu appearing by
default when the export icon is
clicked. The menu items are rendered in HTML. Defaults to
menuItemStyle: {
padding: '0 5px',
background: NONE,
color: '#303030'
}
menuItemHoverStyle
CSSObject
Since 2.0
CSS styles for the hover state of the individual items within the popup menu appearing by
default when the export icon is
clicked. The menu items are rendered in HTML. Defaults to
menuItemHoverStyle: {
background: '#4572A5',
color: '#FFFFFF'
}
buttonOptions
navigation.buttonOptions
Since 2.0
General options for buttons like the Print and Export buttons.
navigation.buttonOptions
A collection of options for buttons appearing in the exporting module.
backgroundColor
Color
Since 2.0
Background color or gradient for the buttons. Defaults to
backgroundColor: {
linearGradient: [0, 0, 0, 20],
stops: [
[0.4, '#F7F7F7'],
[0.6, '#E3E3E3']
]
}
enabled
Boolean
true
Since 2.0
Whether to enable buttons
hoverSymbolFill
String
#81A7CF
Since 2.0
Fill color for the symbol within the button on hover
hoverSymbolStroke
String
#4572A5
Since 2.0
Stroke (line) color for the symbol within the button on hover
symbolFill
String
#E0E0E0
Since 2.0
Fill color for the symbol within the button
symbolStrokeWidth
Number
1
Since 2.0
The pixel stroke width of the symbol on the button
symbolX
Number
11.5
Since 2.0
The x position of the center of the symbol inside the button.
symbolY
Number
10.5
Since 2.0
The y position of the center of the symbol inside the button.
verticalAlign
String
"top"
Since 2.0
The vertical alignment of the buttons. Can be one of "top", "middle" or
"bottom".
verticalAlign
String
"top"
Since 2.0
The vertical alignment of the buttons. Can be one of "top", "middle" or
"bottom".
y
Number
10
Since 2.0
The vertical offset of the button's position relative to its
verticalAlign.
exporting
Options for the exporting module.
buttons
exporting.buttons
Since 2.0
Configuration options for the buttons associated with the exporting module.
enabled
Boolean
true
Since 2.0
Whether to enable the exporting module.
filename
string
"chart"
Since 2.0
The filename, without extension, to use for the exported chart.
type
String
"image/png"
Since 2.0
Default MIME type for exporting if
chart.exportChart() is called
without specifying a type option. Possible values are image/png,
image/jpeg, application/pdf and image/svg+xml.
url
String
http://export.highcharts.com
Since 2.0
The URL for the server module converting the SVG string to an image format. By
default this points to Highslide Software's free web service.
width
Number
800
Since 2.0
The pixel width of charts exported to PNG or JPG.
exporting.buttons
Options for the export related buttons, print and export.
exportButton
exporting.buttons.exportButton
Since 2.0
Options for the export button.
printButton
exporting.buttons.printButton
Since 2.0
Options for the print button.
exporting.buttons.exportButton
Extends navigation.buttonOptions
Options for the export button.
onclick
Function
Since 2.0
A click handler callback to use on the button directly instead of the popup menu.
menuItems
Array<Object>
Since 2.0
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).
symbol
String
"exportIcon"
Since 2.0
The symbol for the button. Points to a definition function in the
Highcharts.Renderer.symbols collection. The default
exportIcon function is part of the exporting module.
x
Number
10
Since 2.0
The horizontal positioin of the button relative to the
align
option.
exporting.buttons.printButton
Extends navigation.buttonOptions
Options for the print button.
onclick
Function
Since 2.0
A click handler callback to use on the button directly. By default this onclick calls
chart.print(), but it can be overridden to do other actions.
symbol
String
"printIcon"
Since 2.0
The symbol for the button. Points to a definition function in the
Highcharts.Renderer.symbols collection. The default
print function is part of the exporting module.
x
Number
-36
Since 2.0
The horizontal positioin of the button relative to the
align
option.
The Highcharts Namespace
The namespace under which all other Highcharts variables are assembled is called
Highcharts.
var chart1 = new Highcharts.Chart(options);
Methods
Chart
(Object options)
Chart
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.
Returns
- A reference to the created
Chartobject.
dateFormat
(String format, [Number time], [Boolean capitalize])
String
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.
numberFormat
(Number number, [Number decimals], [String decimalPoint], [String thousandsSep])
String
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.
setOptions
(Object options)
Object
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.
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
addSeries
(Object options, [Boolean redraw])
Series
Since 1.2.0
Add a series to the chart after render time.
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.
Returns
- The series added, if successful.
destroy
()
Since 1.2.2
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.
exportChart
(Object options, Object chartOptions)
null
Since 2.0
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
(String id)
Axis|Series|Point
Since 1.2.0
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,
nullif not.
getSelectedPoints
()
Array<Point>
Since 1.2.0
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.
getSelectedSeries
()
Array<Series>
Since 1.2.0
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.
getSVG
(Object additionalOptions)
String
Since 2.0
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.
hideLoading
()
null
Since 1.2.0
Hide the loading screen. Options for the loading screen are defined at options.loading.
print
()
null
Since 2.0
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
()
null
Since 1.2.0
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.
updatePosition
()
null
Since 1.2.5
This method is deprecated as of 2.0.1. Updating the chart position after a move operation is no longer necessary.
showLoading
()
null
Since 1.2.0
Dim the chart's plot area and show a loading label text. Options for the loading screen are defined at options.loading.
Properties
container
Object
Since 1.2.5
A reference to the containing HTML element as given in
chart.renderTo.
options
Object
Since 1.2.0
The options stucture for the chart.
series
Array<Object>
Since 1.2.0
An array of all the chart's series.
xAxis
Array<Object>
Since 1.2.0
An array of the chart's x axes. If only one x axis, it is referenced by
chart.xAxis[0].
yAxis
Array<Object>
Since 1.2.0
An array of the chart's y axes. If only one y axis, it is referenced by
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
addPlotBand
(Object options)
Since 1.2.0
Add a plot band after render time.
Parameters
- options: Object
A configuration object consisting of the same members as options.xAxis.plotBands
addPlotLine
(Object options)
Since 1.2.0
Add a plot line after render time.
Parameters
- options: Object
A configuration object consisting of the same members as options.xAxis.plotLines
getExtremes
()
Object
Since 1.2.0
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
maxoption is not set andmaxPaddingis 0, this value will be the same asdataMax. - min: The minimum axis value, either automatic or set manually. If
the
minoption is not set andminPaddingis 0, this value will be the same asdataMin.
setCategories
(Array cateories, [Boolean redraw])
Since 1.2.0
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().
setExtremes
(Number min, Number max, [Boolean redraw])
Since 1.2.0
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().
removePlotBand
(String id)
Since 1.2.0
Remove a plot band by its id.
Parameters
- id: String
The plot band'sidas given in the original configuration object or in the addPlotBand method.
removePlotLine
(String id)
Since 1.2.0
Remove a plot line by its id.
Parameters
- id: String
The plot line'sidas 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
addPoint
(Object options, [Boolean redraw], [Boolean shift])
Since 1.2.0
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 theredrawoption 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.
hide
()
Since 1.2.0
Hides the series if visible. If the chart.ignoreHiddenSeries option is true,
the chart is redrawn without this series.
remove
([Boolean redraw])
Since 1.2.0
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
([Boolean selected|null])
Since 1.2.0
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. Whenfalseit is unselected. Whennullorundefined, the series' selection state is toggled.
setData
(Array<Mixed> data, [Boolean redraw])
Since 1.2.0
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
chart
Object
Since 1.2.0
The chart that the series belongs to.
data
Array
Since 1.2.0
An array with the series' data point objects.
name
String
Since 1.2.0
The series' name as given in the options.
options
Object
Since 1.2.0
The series' options.
selected
Boolean
Since 1.2.0
The series' selected state as set by
series.select().
type
String
Since 1.2.0
The series' type, like "line", "area" etc.
visible
Boolean
Since 1.2.0
The series' visibility state as set by
series.show(),
series.hide(), or the initial configuration.
xAxis
Object
Since 1.2.0
The unique xAxis object associated with the series.
yAxis
Object
Since 1.2.0
The unique yAxis object associated with the series.
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
([Boolean redraw])
Since 1.2.0
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.
select
([Boolean select], [Boolean accumulate])
Since 1.2.0
Select or unselect the point.
Parameters
-
select: Boolean
Whentrue, the point is selected. Whenfalse, the point is unselected. Whennullorundefined, 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
([Boolean sliced], [Boolean redraw])
Since 1.2.0
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. Whennullorundefined, the sliced state is toggled. -
redraw: Boolean
Defaults totrue. Whether to redraw the chart after the point is altered.
update
([Mixed options], [Boolean redraw])
Since 1.2.0
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.
Properties
category
String|Number
Since 1.2.0
For categorized axes this property holds the category name for the point. For other
axis it holds the x value.
percentage
Number
Since 1.2.0
The percentage for points in a stacked series or pies.
selected
Boolean
Since 1.2.0
Whether the point is selected or not.
series
Object
Since 1.2.0
The series object associated with the point.
x
Number
Since 1.2.0
The x value for the point.
y
Number
Since 1.2.0
The y value for the point.