YouTip

Highcharts provides a large number of configuration option parameters, allowing you to easily customize charts to meet user requirements. This chapter provides a detailed introduction to the usage of Highcharts configuration options: * * * ## Parameter Configuration (Attributes + Events) 1. chart.events.addSeries: Adds a series to the chart. 2. chart.events.click: The click event that occurs on the entire chart's plotting area. 3. chart.events.load: The chart load event. 4. chart.events.redraw: The chart redraw event, which can be triggered when clicking the legend to show or hide the plot. 5. chart.events.selection: When the chart curve is selectable for zooming, this event can be triggered when performing a selection operation on the chart. 6. chart.height: The height value of the drawn chart. 7. chart.inverted: Swaps 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: In a blank chart, whether to display the axes. 12. chart.type: The type of the chart, default is line, also bar/column/pie…… 13. chart.width: The width of the chart plotting area, default is adaptive. 14. chart.zoomType: The zoom type for data reports in the chart. It can be zoomed along the X-axis, Y-axis, or both XY axes simultaneously. 15. colors: The colors between multiple series in the chart. It is an array, generally not modified. 16. credits.enabled: Whether to allow the display of copyright information. 17. credits.href: The link for the copyright holder. 18. credits.text: The text displayed for the copyright information. 19. exporting.buttons.exportButton.enabled: Whether to allow the display of the export button. 20. exporting.buttons.exportButton.menuItems: The menu options for the export button. 21. exporting.buttons.exportButton.onclick: The 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 for the print button. 24. exporting.enabled: Whether the print and export buttons are allowed. 25. exporting.filename: The filename of the exported file. 26. exporting.type: The default file format for exported images. 27. exporting.url: The interface processing address for converting and exporting SVG charts. 28. exporting.width: The default width of exported images. 29. labels: Labels, which can be loaded to any position on the chart, containing items and style. 30. lang: Language parameter configuration, related to the export button menu configuration, time name configuration, etc. 31. legend.enabled: Whether to allow the legend. 32. navigation.buttonOptions.enabled: Whether all navigation buttons in the chart can be clicked. 33. plotOptions.area.allowPointSelect: Whether to allow clicking on 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 mouse tracking bubble display for data points in the data chart. 37. plotOptions.area.events.checkboxClick: The click event for the checkbox in the legend of the data chart. 38. plotOptions.area.events.click: The click event for data points in the data chart. 39. plotOptions.area.events.hide: The event when a certain data series is hidden in the data chart. 40. plotOptions.area.events.show: The event when a certain 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. Assigning false directly makes it unclickable. 42. plotOptions.area.events.mouseOut: The mouse-out event for data points. 43. plotOptions.area.events.mouseOver: The mouse-over event for data points. 44. plotOptions.area.marker.enabled: Whether to display point markers in the chart plot. 45. plotOptions.area.marker.states.hover.enabled: Whether to allow the hover state for markers. 46. plotOptions.area.marker.states.select.enabled: Whether to allow the select state for markers. 47. plotOptions.area.point.events.click: The 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: The 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: The event when a point selection is canceled in the chart. 53. plotOptions.area.point.events.update: The event when data is updated in the chart. 54. plotOptions.area.visible: Whether the data series is displayed 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-type 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 with the mouse. 61. plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange are similar to plotOptions.area. 62. plotOptions.bar.groupPadding: For bar chart grouping, the spacing between each group. 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, plotOptions.columnrange are similar to plotOptions.bar. 68. The related configuration of plotOptions.line is similar to plotOptions.area configuration. 69. plotOptions.pie.ignoreHiddenPoint: In a pie chart, after a series is hidden via legend click, whether the entire pie chart is re-distributed to 100% or just hidden on the original chart, leaving a gap. 70. plotOptions.pie.innerSize: When drawing a pie chart, the size of the blank space reserved at the center of the pie. 71. plotOptions.pie.slicedOffset: Used in conjunction with allowPointSelect. When a point is clicked, the corresponding sector is sliced out, and this parameter configures the distance it moves away. 72. Other common configuration parameters of plotOptions.pie are similar to plotOptions.area, plotOptions.scatter, plotOptions.series, plotOptions.spline configuration is similar to plotOptions.area configuration. 73. series: Is an array. 74. series.data.color: The color of a specific data point. 75. series.data.dataLabels: The data label for a specific data point in the series. 76. series.data.events is similar to the related configuration of plotOptions.area.point.events. 77. series.data.marker is similar to the related configuration of plotOptions.area.marker. 78. series.data.name: Configures the name of the data point. 79. series.data.sliced: Configures the separation distance of the sector 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 stacking group index. 84. series.type: The display type of the data series. 85. series.xAxis, series.yAxis: When using multiple axes, specifies which axis a series corresponds to. 86. subtitle: Configures the subtitle of the chart. 87. title: Configures the title of the chart. 88. tooltip: Configures the tooltip for data in the chart. 89. tooltip.valueDecimals: The allowed number of decimal places. 90. tooltip.percentageDecimals: The allowed number of decimal places for percentages. 91. xAxis, yAxis configuration sets the axes. 92. allowDecimals: Whether decimals are allowed on the axis. 93. categories: Is an array, the categories of the axis. 94. plotLines: Draws plot lines. 95. tickColor: The color of the ticks. 96. tickInterval: The step value of the ticks. 97. labels.rotation: The rotation degree of the tick labels. ## Chart: Chart Area Options Chart area options are used to set the related attributes of the chart area. | Parameter | Description | Default Value | | --- | --- | --- | | backgroundColor | Sets the background color of the chart area | #FFFFFF | | borderWidth | Sets the border width of the chart | 0 | | borderRadius | Sets the border radius angle of the chart | 5 | | renderTo | The container where the chart is placed, generally a DIV is placed in HTML, and the id attribute value of the DIV is obtained | null | | defaultSeriesType | Default chart type line, spline, area, areaspline, column, bar, pie, scatter | 0 | | width | Chart width, default adapts to the width of the chart container | null | | height | Chart height, default adapts to the height of the chart container | null | | margin | Sets the spacing between the chart and other elements, an array, e.g., [0,0,0,0] | | | plotBackgroundColor | Background color of the main plotting area, i.e., the background color of the area enclosed by the X and Y axes | null | | plotBorderColor | Border color of the main plotting area, i.e., the border color of the area enclosed by the X and Y axes | null | | plotBorderWidth | Border width of the main plotting area | 0 | | shadow | Whether to set a shadow, requires setting the background color backgroundColor. | false | | reflow | Whether to adapt the height and width of the chart area. If width and height are not set, it will adapt to the size. | true | | zoomType | Drag the mouse to zoom, zoom along the x-axis or y-axis, can be set to: 'x', 'y', 'xy' | '' | | events | Event callbacks, supporting callback functions for addSeries method, click method, load method, selection method, etc. | | * * * ## Color: Color Options Color options are used to set the color scheme of the chart. Parameter Description Default Value color Used to display the chart, the color for line/bar/pie etc. charts, in array form. array Highcharts has provided multiple color schemes by default. When the number of graphics to be displayed exceeds the number of color types, the extra graphics will automatically start selecting from the first color scheme. Method to customize the color scheme: Highcharts.setOptions({ colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655','#FFF263', '#6AF9C4']}); * * * ## Title: Title Options Title options are used to set the related attributes of the chart title. | Parameter | Description | Default Value | | --- | --- | --- | | text | Title text content. | Chart title | | align | Horizontal alignment. | center | | verticalAlign | Vertical alignment. | top | | margin | Spacing between the title and subtitle or the main plotting area. | 15 | | floating | Whether it is floating. If true, the title can deviate from the main plotting area and can be used with x, y attributes. | false | | style | Sets the CSS style. | {color: '#3E576F', fontSize: '16px'} | * * * ## Subtitle: Subtitle Options The attribute options provided by the subtitle are roughly the same as the title. Please refer to the above title options. 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 the related attributes of the chart's X-axis. | Parameter | Description | Default Value | | --- | --- | --- | | categories | Sets the category names for the X-axis, an array, e.g.: categories: ['Apples', 'Bananas', 'Oranges'] | [] | | title | X-axis name, supports attributes like text, enabled, align, rotation, style, etc. | | | labels | Sets the style style, format formatter, angle rotation, etc., for each category name on the X-axis. | array | | max | Maximum value of the X-axis (when categories is empty). If null, the maximum value will be automatically matched based on the X-axis data. | null | | min | Minimum value of the X-axis (when categories is empty). If null, the minimum value will be automatically matched based on the X-axis data. | array | | gridLineColor | Grid (vertical line) color | #C0C0C0 | | gridLineWidth | Grid (vertical line) width | 1 | | lineColor | Base line color | #C0D0E0 | | lineWidth | Base line width | 0 | * * * ## yAxis: Y-Axis Options Y-axis options are basically the same as the above xAxis options. Please refer to the parameter settings in the table above; they will not be listed separately. * * * ## Series: Data Series Options Data series options are used to set the related attributes of the data to be displayed in the chart. | Parameter | Description | Default Value | | --- | --- | --- | | data | The data series displayed in the chart, can be an array or JSON format data. E.g.: data:[0, 5, 3, 5], or data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}] | '' | | name | The name of the data series displayed. | '' | | type | Data series type, supports area, areaspline, bar, column, line, pie, scatter or spline | line | * * * ## plotOptions: Data Point Options plotOptions is used to set the related attributes of data points in the chart. plotOptions varies slightly in attribute settings depending on various chart types. Common options are listed below. Parameter Description Default Value enabled Whether to display data directly on the data point false allowPointSelect Whether to allow selecting data points with the mouse false formatter Callback function to format the data display content formatter: function() {return this.y;} * * * ## Tooltip: Data Point Tooltip Tooltip is used to set the tooltip information displayed when the mouse moves over a data point. Parameter Description Default Value enabled Whether to display the tooltip true backgroundColor Sets the background color of the tooltip rgba(255, 255, 255, .85) borderColor Tooltip border color, default automatically matches the data series color auto borderRadius Tooltip border radius 5 shadow Whether to display the 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: , , , ,
, 2 * * * ## Legend: Legend Options legend is used to set the related attributes of the legend. | Parameter | Description | Default Value | | --- | --- | --- | | layout | Display format, supports horizontal and vertical | horizontal | | align | Alignment method. | center | | backgroundColor | Legend background color. | null | | borderColor | Legend border color. | #909090 | | borderRadius | Legend border radius | 5 | | enabled | Whether to display the legend | true | | floating | Whether it can float, used with x, y attributes. | false | | shadow | Whether to display the shadow | false | | style | Sets the content style of the legend | '' | For more detailed information, please refer to the official Highcharts English documentation: [http://api.highcharts.com/highcharts](http://api.highcharts.com/highcharts)