Highcharts Options Reference

<< Go to the Highcharts home page

Navigate the structure by clicking plus and minus. Click the blue object names for details.

The options object

Methods and properties

  • Chart
  • Axis
  • Series
  • Point

chart

Options regarding the chart area and plot area as well as general chart options.
backgroundColor Color null
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.
borderRadius Number 5
The corner radius of the outer chart border.
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.
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, 60, 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.
plotBackgroundColor Color null
The background color or gradient for the plot area.
plotBorderColor Color "#C0C0C0"
The color of the inner chart or plot area border.
plotBorderWidth Number 0
The pixel width of the plot area border.
plotShadow Boolean false
Whether to apply a drop shadow to the plot area.
shadow Boolean false
Whether to apply a drop shadow to the outer chart area.
style CSSObject null
Additional CSS styles to apply inline to the container div.
width Number null
An explicit width for the chart. By default the width is calculated from the offset width of the containing element.
style CSSObject null
Additional CSS styles to apply inline to the container div.
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.
text String "Chart title"
The title of the chart.
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: 
{
	textAlign: 'center',
	color: '#3E576F',
	font: '16px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',
	margin: '10px 0 0 0'
}

subtitle

The chart's subtitle
text String ""
The subtitle of the chart.
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: 
{
	textAlign: 'center',
	color: '#3E576F',
	font: '16px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',
	margin: '10px 0 0 0'
}

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.

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.
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.
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.
lineColor Color "#C0D0E0"
The color of the line marking the axis itself.
lineWidth Number 1
The width of the line marking the axis itself.
max Number null
The maximum value of the axis. If null the max value is automatically calculated.
maxPadding Number 0 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.
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.
minorGridLineColor Color #E0E0E0
Color of the minor, secondary grid lines.
minorGridLineWidth Number 1
Width of the minor, secondary grid lines.
minorTickColor Color #A0A0A0
Color for the minor tick marks.
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.
minorTickLength Number 2
The pixel length of the minor tick marks.
minorTickPosition String outside
The position of the minor tick marks relative to the axis line. Can be one of inside and outside.
minorTickWidth Number 1
The pixel width of the minor tick mark.
minPadding Number 0 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.
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.
showFirstLabel Boolean true
Whether to show the first tick label.
showLastLabel Boolean false
Whether to show the last tick label.
startOfWeek Number 1
For datetime axes, this decides where to put the separator line 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.
tickColor Color #C0D0E0
Color for the main tick marks.
tickInterval Mixed "auto"
The interval of the tick marks in axis units. When "auto", the tick interval is computed to approximately follow the tickPixelInterval. Not applicable to categorized axis.
tickLength Number 5
The pixel length of the main tick marks.
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 "auto" 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.
tickWidth Number 1
The pixel width of the major tick marks.
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.

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.
enabled Boolean true
Enable or disable the axis labels.
formatter Function
Callback JavaScript function to format the label. The value is given by this.value. Defaults to: 
function() {
	return this.value;
}
rotation Number 0
Rotation of the labels in degrees.
style CSSObject
CSS styles for the label. Defaults to: 
style: {
	color: '#666',
	font: '10px bold "Lucida Grande", "Lucida Sans Unicode",'+
		' Verdana, Arial, Helvetica, sans-serif'
}
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.
color Color null
The color or gradient of the plot band.
from Number null
The start position of the plot band in axis units.
to Number null
The end position of the plot band in axis units.

xAxis.plotLines

A line streching across the plot area, marking a specific value on one of the axes.
color Color null
The color of the line.
value Number null
The position of the line in axis units.
width Number null
The width or thickness of the plot line.

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".
enabled Boolean false
Enable or disable the axis title.
margin Number 35
The pixel distance between the axis line and the title. Positive values are outside the axis line, negative are inside.
rotation Number 0
The rotation of the text in degrees. 0 is horizontal, 270 is vertical reading from bottom to top.
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',
	font: 'bold 12px "Lucida Grande", "Lucida Sans Unicode", '+
		'Verdana, Arial, Helvetica, sans-serif'
}
text String "X-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.

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.
gridLineWidth Number 1
The width of the grid lines extending the ticks across the plot area.
lineWidth Number 0
The width of the line marking the axis itself.
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.
showLastLabel Boolean true
Whether to show the last tick label.
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.
tickWidth Number 0
The pixel width of the major tick marks.

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

enabled Boolean true
Enable or disable the axis title.
margin Number 40
The pixel distance between the axis line and the title. Positive values are outside the axis line, negative are inside.
rotation Number 270
The rotation of the text in degrees. 0 is horizontal, 270 is vertical reading from bottom to top.
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.

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.
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.
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().
lineWidth Number 2
Pixel with of the graph line.
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.
shadow Boolean true
Whether to apply a drop shadow to the graph line.
rescaleAxesWhenHidden Boolean false Since 1.2.0
If true, the axes will scale to the remaining visible series once this series is hidden. If false, hiding and showin a series will not affect the axes or the other series.
showCheckbox Boolean false Since 1.2.0
If true, a checkbox is displayed next to the legend item to allow selecting the series.
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.
visible Boolean true
Set the initial visibility of the series.

plotOptions.series.marker

enabled Boolean true
Enable or disable the point marker.
fillColor Color "auto"
The fill color of the point marker. When "auto", the series' or point's color is used.
lineColor Color "#FFFFFF"
The color of the point marker's outline. When "auto", the series' or point's color is used.
lineWidth Number 0
The width of the point marker's outline.
radius Number 0
The radius of the point marker.
states plotOptions.series.marker.states
Interaction states for the point marker.
symbol String "auto"
A predefined shape or symbol for the marker. When "auto", 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.

plotOptions.series.marker.states.hover

enabled Boolean true
Enable or disable the point marker.
fillColor Color "auto"
The fill color of the point marker. When "auto", the series' or point's color is used.
lineColor Color "#FFFFFF"
The color of the point marker's outline. When "auto", the series' or point's color is used.
lineWidth Number 0
The width of the point marker's outline.
radius Number
The radius of the point marker. In hover state, it defaults to the normal state's radius + 2.
symbol String "auto"
A predefined shape or symbol for the marker. When "auto", 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)".

plotOptions.series.dataLabels

Extends xAxis.labels

enabled Boolean false
Enable or disable the data labels.
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.

Default value: 
formatter: function() {
	return this.y;
}
x Number 0
The x position offset of the label relative to the point.
y Number -6
The y position offset of the label relative to the point.

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

lineWidth Number 2
Pixel with of the graph line.
marker plotOptions.series.marker
Defines the appearance of the point markers.
shadow Boolean true
Whether to apply a drop shadow to the graph line.

plotOptions.series.states.hover.marker

Extends plotOptions.series.marker

lineWidth Number
The line width of the point marker of a hovered line. Defaults to the lineWidth in normal state + 1.
radius Number
The radius of the point marker of a hovered line. Defaults to the lineWidth in normal state + 1.
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.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.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

lineWidth Number 0
The width of the line connecting the data points.

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.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 "auto"
Fill color for the area. When "auto", the series' color is used with the series' fillOpacity.
fillOpacity Number .75
Fill opacity for the area.
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.

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

borderColor Color "#FFFFFF"
The color of the border surronding each column or bar.
borderRadius Number 0
The corner radius of the border surronding each column or bar.
borderWidth Number 1
The width of the border surronding each column or bar.
groupPadding Number .2
Padding between each value groups, in x axis units.
pointPadding Number .1
Padding between each column or bar, in x axis units.

plotOptions.column.marker

Extends plotOptions.series.marker

plotOptions.column.marker.states

Extends plotOptions.series.marker.states

plotOptions.column.marker.states.hover

Extends plotOptions.series.marker.states.hover

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 .1
How much to brighten the point on interaction.
shadow Boolean false
The drop shadow for each column or bar.

plotOptions.column.states.hover.marker

Extends plotOptions.series.states.hover.marker

plotOptions.bar

Extends plotOptions.column

plotOptions.bar.marker

Extends plotOptions.column.marker

plotOptions.bar.marker.states

Extends plotOptions.column.marker.states

plotOptions.bar.marker.states.hover

Extends plotOptions.column.marker.states.hover

plotOptions.bar.dataLabels

Extends plotOptions.column.dataLabels

align String "left"
Alignment of the data label relative to the data point.
x Number 5
The x position of the data label relative to the data point.
y Number 0
The y position 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

borderColor Color "#FFFFFF"
The color of the border surronding each slice.
borderWidth Number 1
The width of the border surronding each slice.
center Array<String> ['50%', '50%']
The center of the pie chart relative to the plot area. Can be percentages or pixel values.
legendType String "point"
Whether each legend item should refer to a "point" or a "series".
size String "90%"
The diameter of the pie relative to the plot area. Can be a percentage or pixel value.
slicedOffset Number 10
If a point is sliced, moved out from the center, how many pixels should it be moved?

plotOptions.pie.marker

Extends plotOptions.series.marker

plotOptions.pie.marker.states

Extends plotOptions.series.marker.states

plotOptions.pie.marker.states.hover

Extends plotOptions.series.marker.states.hover

plotOptions.pie.dataLabels

Extends plotOptions.series.dataLabels

plotOptions.pie.events

Extends plotOptions.series.events

plotOptions.pie.point

Extends plotOptions.series.point

plotOptions.pie.point.events

Extends plotOptions.series.point.events

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.
shadow Boolean false
The drop shadow for each column or bar.

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',
	font: '12px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif'
}

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 layer containing a symbol and name for each series item or point item in the chart.
backgroundColor Color null
The background color of the legend, filling the rounded corner border.
borderColor Color #909090
The color of the drawn border around the legend.
borderRadius Number 5
The border corner radius of the legend.
borderWidth Number 0
The width of the drawn border around the legend.
enabled Boolean true
Enable or disable the legend.
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: {
	listStyle: 'none',
	margin: '0 1em 0 0',
	padding: 0,
	font: '13px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',
	cursor: 'pointer',
	color: '#3E576F'
}
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
}
shadow Boolean true
Whether to apply a drop shadow to the legend.
style CSSObject
CSS styles for the legend area. Defaults to: 
style: {
	position: 'absolute',
	zIndex: 10,
	bottom: '10px',
	left: '80px',
	padding: '5px'
}
symbolPadding Number 5
The pixel padding between the legend item symbol and the legend item text.
symbolWidth Number 30
The pixel width of the legend item symbol.

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: {
	font: 'bold 12px "Lucida Grande", "Lucida Sans Unicode", '+
		'Verdana, Arial, Helvetica, sans-serif',
	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 "auto", the border takes the color of the corresponding series or point.
borderRadius Number 5
The radius of the rounded border corners.
borderWidth Number 2
The pixel width of the tooltip border.
enabled Boolean true
Enable or disable the tooltip.
formatter Function
Callback function to format the HTML of the tooltip. 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.

Default value: 
formatter: function() {
	return ''+ (this.point ? this.point.name : this.series.name) +'
'+
		'X value: '+ this.x +'
'+
		'Y value: '+ this.y;
}
shadow Boolean true
Whether to apply a drop shadow to the tooltip.
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'
}

toolbar

When zooming, a toolbar appears with an item to reset the zoom.
itemStyle CSSObject
CSS styles for each toolbar item. Defaults to: 
itemStyle: {
	color: '#4572A7',
	fontSize: '9pt',
	cursor: 'pointer',
	margin: '20px'
}

credits

Highchart by default puts a credits label in the lower right corner of the chart. This can be changed using these options.
enabled Boolean true
Whether to show the credits text.
href String "http://www.highcharts.com"
The URL for the credits label.
style CSSObject
CSS styles for the credits label. Defaults to: 
itemStyle: {
	position: 'absolute',
	right: '50px',
	bottom: '5px',
	color: '#999',
	fontSize: '10px',
	textDecoration: 'none'

}
target String "_self" Since 1.2.0
The target for the credits label.
text String "Highcharts.com"
The text for the credits label.

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']
	}
});
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.
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:
  1. A list of numberical 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 and pointInterval given in the plotOptions. If the axis is has categories, these will be used. Example: 
    data: [0, 5, 3, 5]
  2. A list of arrays with two values. In this case, the first value is the x value and the second is the y value. Example: 
    data: [[5, 2], [6, 3], [8, 2]]
  3. 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
}]
Moreover, the data can be given in any form if the dataParser function below is used to prepare the data and return in one of the forms above.
dataParser Function
Callback function to parse the data given either through the data or dataURL members. The data is passed as the first argument to the function. Return the parsed data in one of the forms given under data above.
dataURL String null
The URL to a file to load the data using Ajax. If the data is not in the form shown under data above, it can be parsed using dataParser,
name String ""
The name of the series as shown in the legend, tooltip etc.
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.
color Color null
Individual color for the point.
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.
name String ""
The name of the point as shown in the legend, tooltip, dataLabel etc.
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

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 to true. Whether to redraw the chart after the series is added. See the redraw() method below.

Returns

  • The series added, if successful.
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, null if 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.
hideLoading () null Since 1.2.0

Hide the loading screen. Options for the loading screen are defined at options.loading.

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.

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

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

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' associates series.
  • dataMin: The minimum value of the axis' associates series.
  • max: The maximum axis value.
  • min: The minimum axis value.
setExtremes (Number min, Number max, [Boolean redraw]) Since 1.2.0

Set the minimum and maximum of the axes after render time.

Parameters

  • min: Number
    The new minimum value
  • max: Number
    The new maximum value
  • redraw: Boolean
    Defaults to true. Whether to redraw the chart or wait for an explicit call to chart.redraw().

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 to true. Whether to redraw the chart after the point is added. When adding more than one point, it is highly recommended that the redraw option be set to false, and instead chart.redraw() is explicitly called after the adding of points is finished.
  • shift: Boolean
    Defaults to false. 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 rescaleAxesWhenHidden series 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 to true. 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 call chart.redraw() after.
show () Since 1.2.0

Shows the series if hidden.

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
    When true, the series is selected. When false it is unselected. When null or undefined, the series' selection state is toggled.
setData (Array<Mixed> data, [Boolean redraw]) Since 1.2.0

Apply a new set of data to the point and optionally redraw the series

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 to true. 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 call chart.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 to true. 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 call chart.redraw() after.
select ([Boolean select], [Boolean accumulate]) Since 1.2.0

Select or unselect the point.

Parameters

  • select: Boolean
    When true, the point is selected. When false, the point is unselected. When null or undefined, the selection state is toggled.
  • accumulate: Boolean
    When true, the selection is added to other selected points. When false, 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
    When true, the point is sliced out. When false, the point is set in. When null or undefined, the sliced state is toggled.
  • redraw: Boolean
    Defaults to true. 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 to true. 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 call chart.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.
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.