Advanced Chart Formatting

chart.alignTicks

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. Defaults to true. For example, value set to:

false

chart.backgroundColor

chart.borderColor

chart.borderRadius

chart.borderWidth

chart.plotBackgroundColor

chart.height

An explicit height for the chart. By default the height is calculated from the offset height of the containing element, or 400 pixels if the containing element's height is 0. For example, value set to:

200

chart.ignoreHiddenSeries

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. For example, value set to:

true

chart.inverted

Whether to invert the axes so that the x axis is vertical and y axis is horizontal. For example, value set to:

true

chart.margin

The margin between the outer edge of the chart and the plot area. The numbers in the array designate top, right, bottom and left respectively. Use the options marginTop, marginRight, marginBottom and marginLeft for shorthand setting of one option.

Since version 2.1, the margin is 0 by default. The actual space is dynamically calculated from the offset of axis labels, axis title, title, subtitle and legend in addition to the spacingTop, spacingRight, spacingBottom and spacingLeft options.

Defaults to [null]. For example, value set to:

[100, 80, 60, 80]

chart.marginBottom

100

chart.marginLeft

The margin between the left outer edge of the chart and the plot area. Use this to set a fixed pixel value for the margin as opposed to the default dynamic margin. See also spacingLeft. For example, value set to:

150

chart.marginRight

The margin between the right outer edge of the chart and the plot area. Use this to set a fixed pixel value for the margin as opposed to the default dynamic margin. See also spacingRight. For example, value set to:

270

chart.marginTop

The margin between the top outer edge of the chart and the plot area. Use this to set a fixed pixel value for the margin as opposed to the default dynamic margin. See also  spacingTop. For example, value set to:

30

chart.panKey

Allows setting a key to switch between zooming and panning. For example, value set to:

"shift"

chart.panning

Allow panning in a chart. Defaults to false. For example, value set to:

true

chart.plotBackgroundImage

The URL for an image to use as the plot background. To set an image as the background for the entire chart, set a CSS background image to the container element. Note that for the image to be applied to exported charts, its URL needs to be accessible by the server. For example, value set to:

"insert URL"

chart.plotBorderColor

The color of the inner chart or plot area border. Defaults to #C0C0C0. For example, value set to:

"blue"

chart.plotBorderWidth

The pixel width of the plot area border. Defaults to  0. For example, value set to:

2

chart.polar

When true, cartesian charts like line, spline, area and column are transformed into the polar coordinate system. Requires  highcharts-more.js . Defaults to  false . For example, value set to:

true

chart.reflow

Whether to reflow the chart to fit the width of the container div on resizing the window. Defaults to  true . For example, value set to:

false

chart.resetZoomButton.position.x
chart.resetZoomButton.position.y

Affects the position of the "Reset zoom" button. This is an object that can hold the properties  align,  verticalAlign,  x and  y. For example, value set to:

-100

10

chart.resetZoomButton.theme

A collection of attributes for the button. The object takes SVG attributes like   fill,  stroke,  stroke-width or  r, the border radius. The theme also supports  style, a collection of CSS properties for the text. Equivalent attributes for the hover state are given in  theme.states.hover. For example, define the property as follows: 

chart.resetZoomButton.theme.fill

Set value to:

           "red"

chart.selectionMarkerFill

The background color of the marker square when selecting (zooming in on) an area of the chart. Defaults to  rgba(69,114,167,0.25). For example, value set to:

"blue"

chart.showAxes

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. Defaults to  false. For example, value set to:

false

chart.spacing

The distance between the outer edge of the chart and the content, like title, legend, axis title or labels. The numbers in the array designate top, right, bottom and left respectively. Use the options spacingTop, spacingRight, spacingBottom and spacingLeft options for shorthand setting of one option. Defaults to  [10, 10, 15, 10]. For example, value set to:

[20, 20, 25, 20]

chart.style

Additional CSS styles to apply inline to the container  div. Note that since the default font styles are applied in the renderer, it is ignorant of the individual chart options and must be set globally.

Defaults to:

<span style="font-size:12px;">style: { fontFamily: '"Lucida Grande", "Lucida Sans Unicode", 

Verdana, Arial, Helvetica, sans-serif', // default font fontSize: '12px' }</span>

Defaults to:

Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif","fontSize":"12px"}

For example, value set to:

  'serif'

chart.type

"waterfall" or"gauge" or

"solidgauge" 

The default series type for the chart. Use this to create a "waterfall" chart or a "gauge". For example, value set to:

"waterfall"

Notes:

Drawing Gauges requires addtional formatting commands to create the desired appearance.

For example, a SolidGauge, uses the following properties:

chart.type with a value of "solidgauge"

pane.startAngle with a value of -90
pane.endAngle with a value of 90
pane.background.innerRadius with a value of "60%"
yAxis.min with a value of 0
yAxis.minorTickInterval with a value of null
yAxis.lineWidth with a value of 0
yAxis.tickWidth with a value of 0
plotOptions.solidgauge.dataLabels.borderWidth with a value of 0
pane.background.shape with a value of "arc"
yAxis.max with a value of 100000
plotOptions.solidgauge.dataLabels.y with a value of -40
colors with a value of ["skyblue"]
yAxis.labels.y with a value of 12
yAxis.tickPixelInterval with a value of 10000

chart.width

An explicit width for the chart. By default the width is calculated from the offset width of the containing element. For example, value set to:

350

chart.zoomType

Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy. For example, value set to:

"xy"

colors

legend.align

Sets the left-to-right alignment of a chart legend. For example, value set to:

"left"

legend.backgroundColor

The background color of the legend. For example, value set to:

"blue"

legend.borderColor

The color of the drawn border around the legend. Defaults to #909090. For example, value set to:

"red"

legend.borderRadius

The border corner radius of the legend. Defaults to 0. For example, value set to:

10

legend.borderWidth

The width of the drawn border around the legend. Defaults to 0. For example, value set to:

0

legend.enabled

Enable or disable the legend. Defaults to true. For example, value set to:

false

legend.floating

true

legend.itemDistance

50

legend.itemHiddenStyle.color

"green"

legend.itemHoverStyle.color

"SandyBrown"

legend.itemMarginBottom

The pixel bottom margin for each legend item. Defaults to 0. For example, value set to:

4

legend.itemMarginTop

The pixel top margin for each legend item. Defaults to 0. For example, value set to:

5

legend.itemStyle.color

legend.itemStyle.fontSize

CSS styles for each legend item. Only a subset of CSS is supported, notably those options related to text. Defaults to 

 { "color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "bold" }. For example, value set to:

"16px"

legend.itemStyle.fontWeight

CSS styles for each legend item. Only a subset of CSS is supported, notably those options related to text. Defaults to 

 { "color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "bold" }. For example, value set to:

"bold"

legend.itemWidth

The width for each legend item. This is useful in a horizontal layout with many items when you want the items to align vertically. For example, value set to:

180

legend.layout

The layout of the legend items. Can be one of "horizontal" or "vertical". Defaults to horizontal. For example, value set to:

"vertical"

legend.navigation.activeColor

The color for the active up or down arrow in the legend page navigation. Defaults to #3E576F.

"#9FF084"

legend.navigation.animation

How to animate the pages when navigating up or down. A value of true applies the default navigation given in the chart.animation option. Additional options can be given as an object containing values for easing and duration. . Defaults to true. For example, value set to:

false

legend.navigation.arrowSize

The pixel size of the up and down arrows in the legend paging navigation. Defaults to 12. For example, value set to:

16

legend.navigation.inactiveColor

The color of the inactive up or down arrow in the legend page navigation. Defaults to #CCC. For example, value set to:

"red"

legend.navigation.style.fontWeight

Text styles for the legend page navigation. For example, value set to:

"bold"

legend.padding

The inner padding of the legend box. Defaults to 8. For example, value set to:

4

legend.reversed

Whether to reverse the order of the legend items compared to the order of the series or points as defined in the configuration object. Defaults to false. For example, value set to:

true

legend.rtl

Whether to show the symbol on the right side of the text rather than the left side. This is common in Arabic and Hebraic. Defaults to false. For example, value set to:

true

legend.shadow

Whether to apply a drop shadow to the legend. A backgroundColor also needs to be applied for this to take effect. Since 2.3 the shadow can be an object configuration containing color, offsetX,offsetY, opacity and width. Defaults to false. For example, value set to:

true

legend.symbolHeight

The pixel height of the symbol for series types that use a rectangle in the legend. Defaults to the font size of legend items. For example, value set to:

4

legend.symbolPadding

The pixel padding between the legend item symbol and the legend item text. Defaults to 5. For example, value set to:

12

legend.symbolRadius

The border radius of the symbol for series types that use a rectangle in the legend. Defaults to 0. For example, value set to:

10

legend.symbolWidth

The pixel width of the legend item symbol. Defaults to 16. For example, value set to:

30

legend.title.style.fontSize

Generic CSS styles for the legend title. Defaults to {"fontWeight":"bold"}. For example, value set to:

20

legend.useHTML

Whether to use HTML to render the legend item texts. Prior to 4.1.7, when using HTML, legend.navigation was disabled. For example, value set to:

true

legend.verticalAlign

Sets the top-to-bottom alignment of a chart legend. For example, value set to:

"top"

legend.width

The width of the legend box. For example, value set to:

75

legend.backgroundColor

legend.title.text

Displays a legend tile. For example, value set to:

Key:

legend.x

The x offset of the legend relative to its horizontal alignment align within chart.spacingLeft and chart.spacingRight. Negative x moves it to the left, positive x moves it to the right. Defaults to 0. For example, value set to:

-105

legend.y

The vertical offset of the legend relative to it's vertical alignment verticalAlignwithin chart.spacingTop and chart.spacingBottom. Negative y moves it up, positive y moves it down. Defaults to 0. For example, value set to:

20

pane.background.backgroundColor

For example, value set to:

"red"

pane.background.shape

pane.background.innerWidth

pane.background.outerWidth

pane.background.borderWidth

pane.background.borderColor

plotOptions.pie.innerSize

Sets the size of a hole in Pie Charts. Value can either be a pixel number or % of Pie enclosed in double quotes. For example, a value of:

"50%"

plotOptions.series.dataLabels.enabled

Displays data values on a chart. For example, value set to:

true

plotOptions.series.dataLabels.format

Applies a formatting to data labels. For example:

{point.y:.2f} causes data values to display with 2 decimals

{point.y:,.0f} causes data vlaues to display with thousands seperator and zero decimals and causes the chart tp draw as follows:

Another example for percent bar chart:

{point.percentage:.1f} %

Notes:

Requires the plotOptions.series.dataLabels.enabled format property to be set

plotOptions.series.dataLabels.rotation

Rotates data labels from 0 to 360 degrees. For example, value set to:

270

Notes:

plotOptions.series.dataLabels.x

plotOptions.series.dataLabels.y

Defines datalabel offwet position from either X or Y axis. For example, to change the label position on the Y-Axis, use plotOptions.series.dataLabels.y with a value of:

-20

plotOptions.series.pointWidth

For example, value set to:

17

series.shadow

Whether to apply a drop shadow to the graph line. Since 2.3 the shadow can be an object configuration containing color, offsetX, offsetY, opacity and width. Defaults to false. For example, value set to:

false

series.borderWidth

For example, value set to:

0

series.groupPadding

series.pointPadding

subtitle.text

title.text

Displays a Chart Title or Subtitle text string. For example, a title and subtitle values of:

Fresh Food Sales Performance

State Tree Map by Demographic

title.text

The title of the chart. To disable the title, set the text to null. Defaults to Chart title. For example, value set to:

"Title"

tooltip.followPointer

Whether the tooltip should follow the mouse as it moves across columns, pie slices and other point types with an extent. By default it behaves this way for scatter, bubble and pie series by override in the plotOptions for those series types.

For touch moves to behave the same way, followTouchMove must be true also.

Defaults to false. For example, value set to:

true

tooltip.footerFormat

A string to append to the tooltip format. Defaults to false. For example, value set to:

"</table>"

tooltip.headerFormat

The HTML of the tooltip header line. Variables are enclosed by curly brackets. Available variables are point.key, series.name, series.color and other members from the point and seriesobjects. The point.key variable contains the category name, x value or datetime string depending on the type of axis. For datetime axes, the point.key date format can be set using tooltip.xDateFormat.

Defaults to <span style="font-size: 10px">{point.key}</span><br/>. For example, value set to:

"<table>"

tooltip.pointFormat

The HTML of the point's line in the tooltip. Variables are enclosed by curly brackets. Available variables are point.x, point.y, series.name and series.color and other properties on the same form. Furthermore, point.y can be extended by the tooltip.valuePrefix and tooltip.valueSuffix variables. This can also be overridden for each series, which makes it a good hook for displaying units.

Defaults to <span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>. For example, value set to:

""

tooltip.useHTML

Use HTML to render the contents of the tooltip instead of SVG. Using HTML allows advanced formatting like tables and images in the tooltip. It is also recommended for rtl languages as it works around rtl bugs in early Firefox. Defaults to false. For example, value set to:

true

xAxis.alternateGridColor

When using an alternate grid color, a band is painted across the plot area between every other grid line. For example, value set to:

"false"

xAxis.gridLineWidth

The width of the grid lines extending the ticks across the plot area. Defaults to 0. For example, value set to:

5

xAxis.labels.enabled

Enable or disable the axis labels. Defaults to true. For example, value set to:

false

xAxis.tickWidth

The pixel width of the major tick marks. Defaults to 1. For example, value set to:

0

xAxis.title.margin

The pixel distance between the axis labels or line and the title. Defaults to 0 for horizontal axes, 10 for vertical. For example, value set to:

16

xAxis.title.style.fontSize

For example, value set to:

"20px"

xAxis.title.style.letterSpacing

For example, value set to:

"3px"

xAxis.title.text

The actual text of the axis title. It can contain basic HTML text markup like <b>, <i> and spans with style. For example, value set to:

"title"

xAxis.type

The type of axis. Can be one of "linear", "logarithmic", "datetime" or "category". In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days. In a category axis, the point names of the chart's series are used for categories, if not a categories array is defined. Defaults to linear. 

yAxis.alternateGridColor

xAxis.alternateGridColor

yAxis.gridLineWidth

xAxis.gridLineWidth

Sets the width of chart axis gridlines in pixels. For example, a y-axis value set to:

0

yAxis.labels.distance

Angular gauges and solid gauges only. The label's pixel distance from the perimeter of the plot area. Defaults to 15. For example, value set to:

20

yAxis.labels.rotation

Rotation of the labels in degrees. Defaults to 0. For example, value set to:

"auto"

yAxis.lables.style.fontSize

CSS styles for the label. Use whiteSpace: 'nowrap' to prevent wrapping of category labels. Use textOverflow: 'none' to prevent ellipsis (dots). Defaults to{"color":"#6D869F","fontWeight":"bold"}. 

 For example, value set to:

"12px"

yAxis.min

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.

The automatically calculated minimum value is also affected by floor, minPadding, minRange as well as series.threshold and series.softThreshold. For example, value set to:

0

yAxis.max

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 bychart.alignTicks. For example, value set to:

300000

yAxis.minorTickPosition

The position of the minor tick marks relative to the axis line. Can be one of inside and outside. Defaults to outside. For example, value set to:

"inside"

yAxis.tickPosition

The position of the major tick marks relative to the axis line. Can be one of inside and outside. Defaults to outside. For example, value set to:

"outside"

yAxis.title.margin

The pixel distance between the axis labels and the title. Positive values are outside the axis line, negative are inside. Defaults to 40. For example, value set to:

8

yAxis.title.style.fontSize

CSS styles for the title. When titles are rotated they are rendered using vector graphic techniques and not all styles are applicable. Defaults to { "color": "#707070", "fontWeight": "bold" }. For example, value set to:

"18px"

yAxis.title.text

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 tonull. Defaults to Values. For example, value set to:

"Store Sales"

yAxis.type

xAxis.type

"logarithmic" "datetime" "category"

"logarithmic"

or

"datetime"

The type of axis. Can be one of "linear", "logarithmic", "datetime" or "category". In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days. In a category axis, the point names of the chart's series are used for categories, if not a categories array is defined.

For example, the y-axis value set to:

"logarithmic"