Detailed description of Highcharts configuration options


May 09, 2021 21:00 Highcharts


Table of contents


Detailed description of Highcharts configuration options

Highcharts offers a wide range of configuration option parameters that make it easy to customize user-compliant charts, and this section details instructions for using Highcharts configuration options:


Parameter configuration (property-event)

  1. chart.events.addSeries: Add a number of columns to the chart.

  2. chart.events.click: Click events that occur in the plot area of the entire chart.

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

  4. chart.events.redraw: Chart redraw events that can be triggered when you click on the caption to display and hide the drawing.

  5. chart.events.selection: When the chart curve can be selected to zoom in, the event can be triggered when the chart action is selected.

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

  7. chart.inverted: x, y-axis pair in the chart.

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

  9. chart.reflow: When the window size changes, the chart width adaptive window size changes.

  10. Chart.renderTo: Where the chart is loaded is a DOM object on the page.

  11. chart.showAxes: In a blank chart, whether axes are displayed.

  12. chart.type: the type of chart, the default is line, and bar/column/pie...

  13. chart.width: The width of the chart plot area, which is adaptive by default.

  14. Chart.zoomType: The magnification type of the data report in the chart, either in the X-axis or on the Y-axis, or at the same time on the XY axis.

  15. Colors: The color between the numbers of columns when most columns in the chart. is an array that generally does not move.

  16. credits.enabled: Whether copyright information is allowed to be displayed.

  17. credits.href: Copyright links.

  18. credits.text: Copyright information display text.

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

  20. exporting.buttons.exportButton.menuItems: Menu options for export buttons.

  21. exporting.buttons.exportButton.onclick: The event in which the export button was clicked is not an internal menu.

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

  23. exporting.buttons.printButton.onclick: Click events for print buttons.

  24. Exporting.enabled: Whether print and export buttons are allowed.

  25. Exporting.filename: The file name of the exported file.

  26. Exporting.type: The file format in which pictures are exported by default.

  27. exporting.url: The interface processing address converted and exported by the SVG chart.

  28. Exporing.width: The width of the picture is exported by default.

  29. Labels: Labels that can be loaded anywhere in the chart, with items, style.

  30. lang: language parameter configuration, configuration related to the export button menu, configuration of time names, etc.

  31. Legend.enabled: Whether to allow graph notes.

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

  33. plotOptions .area.allowPointSelect: Whether to allow clicks on data points.

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

  35. plotOptions.area.dataLabels.enabled: Whether data labeling is allowed.

  36. plotOptions.area.enableMouseTracking: Whether to allow mouse-tracked bubbles in data points to be displayed in data charts.

  37. plotOptions.area.events.checkboxClick: Click events in the check box in the graph in the data chart.

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

  39. plotOptions.area.events.hide: Events in a data chart when a data series is hidden.

  40. plotOptions.area.events.show: Events in a data chart when a data series is displayed.

  41. plotOptions.area.events.legendItemClick: In the data chart, the event when the item in the graph is clicked, the direct assignment of false, is not clickable.

  42. plotOptions.area.events.mouseOut: Mouse out of events at data points.

  43. plotOptions.area.events.mouseOver: The mouse of the data point passes through the event.

  44. plotOptions.area.marker.enabled: Whether or not the marker of the point is displayed in the drawing in the chart.

  45. plotOptions.area.marker.states.hover.enabled: Whether to allow the mouse of the marker to pass through the state.

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

  47. plotOptions.area.point.events.click: Each individual click event in the chart.

  48. plotOptions.area.point.events.mouseOut

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

  50. plotOptions.area.point.events.remove: Events when deleting points in a chart.

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

  52. plotOptions.area.point.events.unselect: Events when the dot in the chart is deselected.

  53. plotOptions.area.point.events.update: Events when data in a chart is updated.

  54. plotOptions.area.visible: When loaded, the data series is displayed or hidden by default.

  55. plotOptions.area.zIndex: In the case of multiple sequences, adjust the cascade order of each sequence.

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

  57. plotOptions.area.showInLegend: Is it shown in the caption?

  58. plotOptions.area.stacking: Stack by value or as a percentage.

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

  60. plotOptions.area.stickyTracking: Mouse sticky tracking data points.

  61. plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange classes are the same as lotOptions.area

  62. plotOptions.bar.groupPadding: For histogram groupings, the interval between each grouping.

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

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

  65. plotOptions.bar.showInLegend: Whether it appears in the caption.

  66. plotOptions.bar.stacking: Stack by value or as a percentage (normal/percent).

  67. The plotOptions.column, plotOptions.columnrange class is the same plotOptions.bar

  68. The configuration associated with plotOptions.line is similar to the slotOptions.area configuration.

  69. plotOptions.pie.ignoreHiddenPoint: In a pie chart, after a sequence is hidden by clicking on the chart, the entire pie chart is redistributed at 100%, or is it hidden only on the basis of the original chart, rendering a gap.

  70. plotOptions.pie.innerSize: When you draw a pie chart, the center of the pie chart is left blank.

  71. plotOptions.pie.slicedOffset: Used in conjunction with alllowPointSelect, when a point is clicked, the corresponding sector is stripped, which is the distance that is configured to leave.

  72. Other common configuration parameters for plotOptions.pie are similar to those associated with lotOptions.area, plotOptions.scatter, plotOptions.series, and plotOptions.spline.

  73. Series: is an array.

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

  75. series.data.dataLabels: A data label for a particular data in a sequence.

  76. The series.data.events class is similar to the configuration associated with lotOptions.area.point.events.

  77. The series.data.marker class is similar to the configuration associated with lotOptions.area.marker.

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

  79. series.data.sliced: Configured in a pie chart, the separation distance size of the sectors.

  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: Stacked grouped indexes.

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

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

  86. subtitle: Configure the subheading of the chart.

  87. Title: Configure the title of the chart.

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

  89. tooltip.valueDecimals: Allowed scales.

  90. tooltip.percentageDecimals: Allows percentages after the number of points.

  91. xAxis, yAxis configuration sets axes

  92. allowDecimals: Whether to allow the number of counts on the axes.

  93. Categories: is an array, the classification of axes.

  94. PlotLines: Draw the main line.

  95. TickColor: Tick Color.

  96. tickInterval: The step value of the scale.

  97. labels.rotation: the number of degrees of rotation of the scale label

Chart: Chart area options

The Chart Chart Area option is used to set chart area-related properties.

Parameters Describe The default
backgroundColor Set the chart area background color #FFFFFF
borderWidth Set the width of the chart border 0
borderRadius Set the angle of the chart border fillet 5
renderTo A container placed by a chart, typically placing a DIV in html to get the id property value of the DIV Null
defaultSeriesType The default chart types line, spline, area, areaspline, column, bar, pie, scatter 0
width Chart width, which is adaptive by default to the chart container Null
height Chart height, which is adaptive by default based on the chart container Null
margin Set the spacing between the chart and other elements, arrays, such as . [null]
plotBackgroundColor The background color of the main chart area, i.e. the background color of the area surrounded by the X and Y axes Null
plotBorderColor The color of the border in the main chart area, that is, the border color of the area surrounded by the X-axis and the Y-axis Null
plotBorderWidth The width of the border in the main chart area 0
shadow Whether to set shadows or not, you need to set the background color backgroundColor. false
reflow If you are using the chart area height and width, if you do not set the width and height, the adaptive size. true
zoomType Drag the mouse to zoom, zoom along the x-axis or the y-axis, and you can set it to: 'x', 'y', 'xy' ''
events Event callbacks, callback functions that support addSeries methods, click methods, load methods, selection methods, etc.

Color: Color options

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

Parameters Describe The default
color Used to display the colors of charts, bars/bars/cakes, etc., in array form. array

Highcharts already provides a variety of color schemes by default, and when you want to display more graphics than color types, the extra graphics are automatically selected from the first color scheme. Ways to customize your color scheme:

Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});

Title: Title options

The Title title option is used to set the title-related properties of the chart.

Parameters Describe The default
text The content of the title text. Chart title
align Horizontal alignment. center
verticalAlign Vertical alignment. top
margin The spacing between the title and the subtitle or the main chart interval. 15
floating Whether it floats or not, if true, the title can deviate from the main chart area and can be used with the x, y properties. false
style Set the CSS style. {color: '#3E576F',
fontSize: '16px'}

Subtitle: Subtitle option

The subtitle provides roughly the same property options as the title, and you can refer to the title option above, and it's worth noting that the subtitle's text option defaults to '', which is empty, so the subtitle doesn't appear by default.


xAxis: X-axis option

The X-axis option is used to set chart X-axis-related properties.

Parameters Describe The default
categories Set X-axis classification names, arrays, e.g. categories: 'Apples', 'Bananas', 'Oranges'" []
title X-axis name, support for text, enabled, align, rotation, style and other properties
labels Set the style styles of the X-axis category names, formatformatter, angle rotation, etc. array
max X-axis maximum (when categories are empty), if null, the maximum value automatically matches a maximum value based on X-axis data. Null
min X-axis minimum value (when categories are empty), if null, the minimum value automatically matches a minimum value based on X-axis data. array
gridLineColor Grid (vertical) color #C0C0C0
gridLineWidth The width of the grid (vertical). 1
lineColor Baseline color #C0D0E0
lineWidth Baseline width 0

yAxis: Y-axis option

The Y-axis option is basically the same as the xAxis option above, please refer to the parameter settings in the table above and no longer list them separately.


Series: Data column options

The data column option is used to set the data-related properties to be displayed in the chart.

Parameters Describe The default
data A column of data displayed in a chart that can be in array or JSON format. e.g. data: s0, 5, 3, 5, or
data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]
''
name Displays the name of the data column. ''
type Data column types, support area, areaspline, bar, column, line, pie, scatter or spline line

plotOptions: Data point options

PlotOptions is used to set data point-related properties in a chart. PlotOptions is slightly different in its property settings depending on the chart type and now lists common options.

Parameters Describe The default
enabled Whether to display the data directly on the data point false
allowPointSelect Whether to allow data points to be selected with the mouse false
formatter Callback function that formats the data display formatter: function() {return this.y; }

Tooltip: Data point prompt box

Tooltip is used to set the prompt box information that appears when the mouse slides toward a data point.

Parameters Describe The default
enabled Whether to display the prompt box true
backgroundColor Set the background color of the prompt box rgba(255, 255, 255, .85)
borderColor Hint box border color, which automatically matches the color of the data column by default auto
borderRadius Tip box circle angle 5
shadow Whether to display a hint box shadow true
style Style the contents of the prompt box, such as font color color:'#333'
formatter Callback function to format the display of the output prompt box. Returned content supports html tags such as: slt;b>, slt;strong>, slt;i>, slt;em>, slt;br;br;,"," 2

Legend: Legend options

Legend is used to set legend-related properties.

Parameters Describe The default
layout Display form, support horizontal horizontal and vertical vertical horizontal
align Alignment. center
backgroundColor Legend background color. Null
borderColor Legend border color. #909090
borderRadius Legend border angle 5
enabled Whether to display the legend true
floating Whether it can float, mate x, y properties. false
shadow Whether to display shadows false
style Style the legend content ''

For more details, please refer to the English documentation on the official website of highcharts: http://api.highcharts.com/highcharts