Detailed explanation of Highcharts configuration options

Highcharts provides a large number of configuration options and parameters, allowing you to easily customize charts to meet user requirements. This chapter introduces the usage instructions for Highcharts configuration options in detail.

Parameter Configuration (Attributes + Events)

  1. chart.events.addSeries: Add a series to the chart.

  2. chart.events.click: The click event that occurs on the plotting area of the entire chart.

  3. chart.events.load: Chart load event.

  4. chart.events.redraw: The chart redraw event, which can be triggered when clicking the legend to show or hide plots.

  5. chart.events.selection: When the chart curve can be selected for zooming, this event can be triggered when a chart selection operation is performed.

  6. chart.height: The height value of the chart to be drawn.

  7. chart.inverted: Swap the x and y axes in the chart.

  8. chart.polar: Whether it is a polar chart.

  9. chart.reflow: When the window size changes, the chart width adapts to the window size change.

  10. chart.renderTo: The location where the chart is loaded, which is a DOM object on the page.

  11. chart.showAxes: Whether to display the axes in a blank chart.

  12. chart.type: The type of the chart, defaulting to line, and also includesbar/column/pie……

  13. chart.width: The width of the chart plotting area, defaulting to auto-adaptive.

  14. chart.zoomType: The zoom type for data reports in the chart. It can be zoomed along the X axis, or the Y axis, or both the XY axes simultaneously.

  15. colors: When there are multiple series in the chart, the colors between each data series. It is an array, generally left unchanged.

  16. credits.enabled: Whether to allow the display of copyright information.

  17. credits.href: Link for copyright.

  18. credits.text: The text displayed for copyright information.

  19. exporting.buttons.exportButton.enabled: Whether to allow displaying the export button.

  20. exporting.buttons.exportButton.menuItems: The menu options of the export button.

  21. exporting.buttons.exportButton.onclick: Event when the export button is clicked, not the internal menu.

  22. exporting.buttons.printButton.enabled: Whether to allow the print button.

  23. exporting.buttons.printButton.onclick: The click event of the print button.

  24. exporting.enabled: Whether the print and export buttons are enabled.

  25. exporting.filename: Filename of the exported file.

  26. exporting.type: The file format of the default exported image.

  27. exporting.url: The interface processing address for converting and exporting SVG charts.

  28. exporting.width: The width of the default exported image. (Note: original text had a typo "exporing.width")

  29. labelsLabels: Can be loaded at any position in the chart, containing items and style.

  30. lang: Language parameter configuration, including configurations related to the export button menu, time name configurations, etc.

  31. legend.enabled: Whether to enable the legend.

  32. navigation.buttonOptions.enabled: Whether the buttons in all navigation in the chart can be clicked.

  33. plotOptions.area.allowPointSelect: Whether to allow clicking data points.

  34. plotOptions.area.color: The color of the plot.

  35. plotOptions.area.dataLabels.enabled: Whether to allow data labels.

  36. plotOptions.area.enableMouseTracking: Whether to allow the bubble display of mouse tracking for data points in the data chart.

  37. plotOptions.area.events.checkboxClick: Click event for the checkbox in the legend in the data chart.

  38. plotOptions.area.events.click: Click event for data points in the data chart.

  39. plotOptions.area.events.hide: The event when a data series is hidden in the data chart.

  40. plotOptions.area.events.show: The event when a data series is shown in the data chart.

  41. plotOptions.area.events.legendItemClick: The event when an item in the legend is clicked in the data chart. If directly assigned false, it cannot be clicked.

  42. plotOptions.area.events.mouseOut: Mouse out event for data points.

  43. plotOptions.area.events.mouseOver: Mouse over event for data points.

  44. plotOptions.area.marker.enabled: Whether to display point markers in the chart's plotting area.

  45. plotOptions.area.marker.states.hover.enabled: Whether to allow the hover state of markers.

  46. plotOptions.area.marker.states.select.enabled: Whether to allow the selected state of markers.

  47. plotOptions.area.point.events.click: Click event for each individual point in the chart.

  48. plotOptions.area.point.events.mouseOut

  49. plotOptions.area.point.events..mouseOver

  50. plotOptions.area.point.events.remove: Event when a point is removed from the chart.

  51. plotOptions.area.point.events.select: The point selection event in the chart.

  52. plotOptions.area.point.events.unselect: Event when a point is deselected in the chart.

  53. plotOptions.area.point.events.update: Event triggered when data in the chart is updated.

  54. plotOptions.area.visible: Whether the data series is shown or hidden by default when loaded.

  55. plotOptions.area.zIndex: In the case of multiple series, adjusts the stacking order of each series.

  56. The above point.events also apply to other area-like charts (arearange, areaspline, areasplinerange), other bar charts (bar, column), and all charts.

  57. plotOptions.area.showInLegend: Whether to display in the legend.

  58. plotOptions.area.stacking: Whether to stack by value or by percentage.

  59. plotOptions.area.states.hover.enabled: Whether the hover state is allowed.

  60. plotOptions.area.stickyTracking: Sticky tracking of data points by the mouse.

  61. plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange are similar to plotOptions.area.

  62. plotOptions.bar.groupPadding: The interval between each group in a bar chart grouping.

  63. plotOptions.bar.grouping: Whether to group the data.

  64. plotOptions.bar.minPointLength: Defines the minimum length of a point when its value is zero.

  65. plotOptions.bar.showInLegend: Whether to display in the legend.

  66. plotOptions.bar.stacking: Whether to stack by value or by percentage (normal/percent).

  67. plotOptions.column and plotOptions.columnrange are similar to plotOptions.bar.

  68. The plotOptions.line configuration is similar to the plotOptions.area configuration.

  69. plotOptions.pie.ignoreHiddenPoint: In a pie chart, after a series is hidden by clicking the legend, whether the entire pie chart is redistributed at 100% or the hidden portion is simply hidden based on the original chart, presenting a gap.

  70. plotOptions.pie.innerSize: How much blank space is reserved at the center of the pie chart when drawing it.

  71. plotOptions.pie.slicedOffset: Used in conjunction with allowPointSelect. When a point is clicked, the corresponding sector is sliced away. This parameter configures the offset distance.

  72. Other common configuration parameters of plotOptions.pie are similar to plotOptions.area; the related configurations of plotOptions.scatter, plotOptions.series, and plotOptions.spline are similar to plotOptions.area configuration.

  73. series: is an array.

  74. series.data.color: The color of a particular data point.

  75. series.data.dataLabels: The data label of a specific data point in a series.

  76. series.data.events is similar to the configuration of plotOptions.area.point.events.

  77. series.data.marker is similar to the configuration of plotOptions.area.marker.

  78. series.data.name: Configure the name of the data point.

  79. series.data.sliced: Configures the separation distance of sectors in a pie chart.

  80. series.data.x: the x value of the point.

  81. series.data.y: the y value of the point.

  82. series.name: The name of the data series.

  83. series.stack: The grouping index for stacking.

  84. series.type: The display type of the data series.

  85. series.xAxis, series.yAxis: When using multiple axes, specifies which axis a data series corresponds to.

  86. subtitle: Configure the chart's subtitle.

  87. title: Configure the chart's title.

  88. tooltip: Configure the tooltip for data in the chart.

  89. tooltip.valueDecimals: Number of decimal places allowed.

  90. tooltip.percentageDecimals: Number of decimal places allowed for percentages.

  91. xAxis, yAxis configuration sets the axis

  92. allowDecimals: Whether decimals are allowed on the axis.

  93. categories: An array, the categories of the axis.

  94. plotLines: Draw main lines.

  95. tickColor: Tick color.

  96. tickInterval: The step value for ticks.

  97. labels.rotation: Rotation degrees for tick labels.

Chart: Chart area options

Chart chart area options are used to set chart area-related properties.

Parameter Description Default value
backgroundColor Set the chart area background color #FFFFFF
borderWidth Set the chart border width 0
borderRadius Set the chart border corner radius 5
renderTo The container where the chart is placed. Generally, a DIV is placed in HTML, obtaining the id attribute value of the DIV. null
defaultSeriesType Default chart types are line, spline, area, areaspline, column, bar, pie, scatter. 0
width The chart width, which by default adapts to the chart container width. null
height The chart height, which by default adapts to the chart container height. null
margin Sets the spacing between the chart and other elements, an array, such as [0,0,0,0]. [null]
plotBackgroundColor The background color of the main chart area, i.e., the background color of the area enclosed by the X and Y axes. null
plotBorderColor The border color of the main chart area, i.e., the border color of the area enclosed by the X and Y axes. null
plotBorderWidth The border width of the main chart area 0
shadow Whether to set a shadow; the backgroundColor needs to be set. false
reflow Whether to auto-adapt the chart area height and width. If width and height are not set, it will adapt to the size. true
zoomType Drag the mouse to zoom, scaling along the x-axis or y-axis, which can be set to: 'x', 'y', 'xy'. ''
events Event callbacks, supporting callback functions for the addSeries method, click method, load method, selection method, etc.  

Color: Color options

The Color option is used to set the color scheme of the chart.

Parameter Description Default value
color Used to display the colors of charts such as line/column/pie charts, in array form. array

Highcharts already provides multiple color schemes by default. When the graphics to be displayed exceed the number of color types, the additional graphics will automatically start selecting from the first color scheme. Method for customizing color schemes:

Highcharts.setOptions({
    colors: ['#058DC7', '#3273B4', '#ED561B', '#DDDF00', '#24CBE5', '#64A4E5', '#FF9655',
'#FFF263', '#6AB2F9']
});

Title: Title options

Title options are used to set chart title-related properties.

Parameter Description Default value
text Title text content. Chart title
align Horizontal alignment mode. center
verticalAlign Vertical alignment mode. top
margin The spacing between the title and subtitle, or the spacing to the main chart area. 15
floating Whether to float. If true, the title can deviate from the main chart area, which can be used with the x and y attributes. false
style Set CSS styles. {color: '#3E576F',
fontSize: '16px'}

Subtitle: Subtitle options

The attribute options provided by the subtitle are roughly the same as those of the title. You can refer to the title options above. It is worth mentioning that the text option of the subtitle defaults to '', i.e., empty, so the subtitle is not displayed by default.

xAxis: X-axis options.

X-axis options are used to set chart X-axis-related properties.

Parameter Description Default value
categories Set X-axis category names, array, e.g., categories: ['Apples', 'Bananas', 'Oranges'] []
title X-axis name, supports attributes like text, enabled, align, rotation, style, etc.  
labels Sets the style of each category name on the X axis, such as style, formatter, rotation, etc. array
max The maximum value of the X axis (when categories is empty). If null, the maximum value will automatically match a maximum value based on the X axis data. null
min The minimum value of the X axis (when categories is empty). If null, the minimum value will automatically match a minimum value based on the X axis data. array
gridLineColor Grid (vertical line) color #C0C0C0
gridLineWidth Grid (vertical line) width 1
lineColor Baseline color #C0D0E0
lineWidth Baseline width 0

yAxis: Y-axis options.

The Y axis options are basically consistent with the xAxis options above. Please refer to the parameter settings in the table above; they are not listed separately.

Series: Data series options

Data series options are used to set properties related to the data to be displayed in the chart.

Parameter Description Default value
data The data series displayed in the chart can be in array or JSON format. For example: data:[0, 5, 3, 5], or
data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]		 ''
name Display the name of the data series. ''
type Data series type, supports area, areaspline, bar, column, line, pie, scatter or spline line

plotOptions: Options for data points.

plotOptions is used to set properties related to data points in the chart. Depending on the chart type, the property settings in plotOptions vary slightly; the common options are listed below.

Parameter Description Default value
enabled Whether to display data directly on data points false
allowPointSelect Whether to allow selecting data points with the mouse false
formatter Callback function to format data display content formatter: function() {return this.y;}

Tooltip: Data point tooltip

Tooltip is used to set the tooltip information displayed when the mouse hovers over a data point.

Parameter Description Default value
enabled Whether to show tooltip. true
backgroundColor Set the tooltip background color rgba(255, 255, 255, .85)
borderColor The border color of the tooltip, which by default automatically matches the color of the data series. auto
borderRadius Tooltip corner radius. 5
shadow Whether to show tooltip shadow true
style Sets the content style of the tooltip, such as font color, etc. color:'#333'
formatter Callback function used to format the display content of the tooltip. The returned content supports HTML tags such as: <b>, <strong>, <i>, <em>, <br/>, <span>. 2

Legend: Legend options

legend is used to set legend-related properties.

Parameter Description Default value
layout Display form, supporting horizontal and vertical. horizontal
align Alignment. center
backgroundColor Legend background color. null
borderColor Legend border color. #909090
borderRadius Legend border radius. 5
enabled Whether to show legend. true
floating Whether it can float, used with the x and y attributes. false
shadow Whether to show shadow. false
style Set the legend content style ''

For more detailed information, please refer to the official Highcharts website English documentation:http://api.highcharts.com/highcharts

other extensions