Highcharts Configuration Options Detailed Explanation
Highcharts offers a vast array of configuration options that allow you to easily customize charts to meet user requirements. This section provides a detailed explanation of Highcharts configuration options:
Parameter Configuration (Attributes + Events)
-
chart.events.addSeries: Add a series to the chart.
-
chart.events.click: Click event on the entire chart's plotting area.
-
chart.events.load: Chart load event.
-
chart.events.redraw: Chart redraw event, triggered when clicking legend items to show or hide plots.
-
chart.events.selection: Triggered when the chart curve can be selected for zooming, during the selection operation.
-
chart.height: The height value of the chart.
-
chart.inverted: Swap the x and y axes in the chart.
-
chart.polar: Whether the chart is polar.
-
chart.reflow: Chart width adjusts to window size changes when the window size changes.
-
chart.renderTo: The location where the chart loads, a DOM object on the page.
-
chart.showAxes: Whether to show the coordinate axes in an empty chart.
-
chart.type: The type of the chart, default is line.
-
chart.width: The width of the chart's plotting area, default is adaptive.
-
chart.zoomType: The zoom type of the chart's data report, can be zoomed along the X-axis, Y-axis, or both.
-
colors: Colors between multiple series in the chart. It's an array, usually left unchanged.
-
credits.href: Link to the copyright.
-
credits.text: Text for copyright information.
-
exporting.buttons.exportButton.menuItems: Menu options for the export button.
-
exporting.buttons.exportButton.onclick: Event when the export button is clicked, not the internal menu.
-
exporting.buttons.printButton.enabled: Whether the print button is allowed.
-
exporting.buttons.printButton.onclick: Click event for the print button.
-
exporting.enabled: Whether the print and export buttons are allowed.
-
exporting.filename: The filename for the exported file.
-
exporting.type: The default file format for exported images.
-
exporting.url: The interface address for converting and exporting SVG charts.
-
exporting.width: The default width for exported images.
-
lang: Language parameter configuration, related to the export button menu, time names, etc.
-
legend.enabled: Whether the legend is allowed.
-
navigation.buttonOptions.enabled: Whether all buttons in the chart navigation are clickable.
-
plotOptions.area.color: The color of the plot.
-
plotOptions.area.dataLabels.enabled: Whether data labels are allowed.
-
plotOptions.area.enableMouseTracking: Whether mouse tracking bubbles are allowed for data points in the chart.
-
plotOptions.area.events.checkboxClick: Click event for checkboxes in the legend in the data chart.
-
plotOptions.area.events.click: Click event for data points in the data chart.
-
plotOptions.area.events.hide: Event when a data series is hidden in the data chart.
-
plotOptions.area.events.show: Event when a data series is shown in the data chart.
-
plotOptions.area.events.legendItemClick: Event when an item in the legend is clicked in the data chart, directly assigning false makes it unclickable.
-
plotOptions.area.events.mouseOut: Mouse out event for data points.
-
plotOptions.area.events.mouseOver: Mouse over event for data points.
-
plotOptions.area.marker.enabled: Whether marker symbols are shown in the chart plot.
-
plotOptions.area.marker.states.hover.enabled: Whether the hover state for markers is allowed.
-
plotOptions.area.marker.states.select.enabled: Whether the select state for markers is allowed.
-
plotOptions.area.point.events.click: Click event for each individual point in the chart.
-
plotOptions.area.point.events.mouseOut
-
plotOptions.area.point.events.mouseOver
-
plotOptions.area.point.events.remove: Event when a point is removed from the chart.
-
plotOptions.area.point.events.select: Selection event for points in the chart.
-
plotOptions.area.point.events.unselect: Event when a point is unselected in the chart.
-
plotOptions.area.point.events.update: Event when data in the chart is updated.
-
plotOptions.area.visible: Whether the data series is shown or hidden by default on load.
-
plotOptions.area.zIndex: Adjust the stacking order of each series in a multi-series chart.
-
The above point.events also apply to other area-type charts (arearange, areaspline, areasplinerange), other bar charts (bar, column), and all charts.
-
plotOptions.area.showInLegend: Whether to show in the legend.
-
plotOptions.area.stacking: Whether to stack by value or by percentage.
-
plotOptions.area.states.hover.enabled: Whether the hover state is allowed.
-
plotOptions.area.stickyTracking: Mouse sticky tracking of data points.
-
plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange are similar to plotOptions.area
-
plotOptions.bar.groupPadding: The interval between each group for bar charts.
-
plotOptions.bar.grouping: Whether data is grouped.
-
plotOptions.bar.minPointLength: Defines the minimum length of a point when its value is zero.
-
plotOptions.bar.showInLegend: Whether to show in the legend.
-
plotOptions.bar.stacking: Whether to stack by value or by percentage (normal/percent).
-
plotOptions.column, plotOptions.columnrange are similar to plotOptions.bar
-
plotOptions.line configurations are similar to plotOptions.area configurations.
-
plotOptions.pie.ignoreHiddenPoint: In a pie chart, when a series is hidden by clicking the legend, whether the entire pie chart redistributes to 100% or just hides, creating a gap.
-
plotOptions.pie.innerSize: The amount of blank space at the center of the pie chart.
-
plotOptions.pie.slicedOffset: Used with allowPointSelect, configures the distance a sector moves away when a point is clicked.
-
Other common configuration parameters for plotOptions.pie are similar to plotOptions.area, plotOptions.scatter, plotOptions.series, plotOptions.spline configurations are similar to plotOptions.area.
-
series.data.color: The color of a specific data point.
-
series.data.dataLabels: Data labels for a specific data point in the series.
-
series.data.events are similar to plotOptions.area.point.events configurations.
-
series.data.marker are similar to plotOptions.area.marker configurations.
-
series.data.name: The name of the data point.
-
series.data.sliced: The separation distance of sectors in a pie chart.
-
series.data.x: The x value of the point.
-
series.data.y: The y value of the point.
-
series.name: The name of the data series.
-
series.stack: The stacking group index.
-
series.type: The display type of the data series.
-
series.xAxis, series.yAxis: Specifies which axis a series corresponds to when using multiple axes.
-
tooltip.valueDecimals: The number of decimal places allowed.
-
tooltip.percentageDecimals: The number of decimal places allowed for percentages.
-
allowDecimals: Whether decimals are allowed on the axis.
-
categories: An array, the categories on the axis.
-
plotLines: Draw main lines.
-
tickColor: The color of the ticks.
-
tickInterval: The step value of the ticks.
-
labels.rotation: The rotation degree of the tick labels.
Chart: Chart Area Options
Chart area options are used to set properties related to the chart area.
| Parameter | Description | Default Value |
|---|---|---|
| backgroundColor | Set the background color of the chart area | #FFFFFF |
| borderWidth | Set the border width of the chart | 0 |
| borderRadius | Set the border radius of the chart | 5 |
| renderTo | The container where the chart is placed, usually a DIV in HTML, with the DIV's id attribute value | null |
| defaultSeriesType | Default chart type line, spline, area, areaspline, column, bar, pie, scatter | 0 |
| width | Chart width, adapts to the chart container by default | null |
| height | Chart height, adapts to the chart container by default | null |
| margin | Set the margin between the chart and other elements, array, e.g., [0,0,0,0] | [null] |
| plotBackgroundColor | The background color of the main chart area, i.e., the area enclosed by the X and Y axes | null |
| plotBorderColor | The color of the main chart area's border, i.e., the area enclosed by the X and Y axes | null |
| plotBorderWidth | The width of the main chart area's border | 0 |
| shadow | Whether to set a shadow, requires setting the background color backgroundColor | false |
| reflow | Whether to adapt the chart area's height and width automatically, adapts when width and height are not set | 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, support 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, line/bar/pie chart colors, array form | array |
Highcharts has default color schemes, and when the number of graphs exceeds the number of colors, additional graphs automatically select from the first color scheme. Custom color scheme method:
Highcharts.setOptions({
```json
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Title: Title Options
Title options are used to set the properties related to the chart title.
| Parameter | Description | Default Value |
|---|---|---|
| text | The text content of the title. | Chart title |
| align | The horizontal alignment. | center |
| verticalAlign | The vertical alignment. | top |
| margin | The distance between the title and subtitle or the main chart area. | 15 |
| floating | Whether it is floating. If true, the title can be offset from the main chart area, can be used with x, y properties. | false |
| style | Set CSS styles. | {color: '#3E576F', fontSize: '16px'} |
Subtitle: Subtitle Options
The subtitle provides attribute options similar to the title, which can refer to the above title options. It is worth mentioning that the text option of the subtitle defaults to '', that is, empty, so the subtitle is not displayed by default.
xAxis: X-Axis Options
X-Axis options are used to set the properties related to the chart's X-axis.
| Parameter | Description | Default Value |
|---|---|---|
| categories | Set the X-axis category names, array, e.g., categories: ['Apples', 'Bananas', 'Oranges'] | [] |
| title | X-axis name, supports properties like text, enabled, align, rotation, style, etc. | |
| labels | Set the style, formatter, rotation, etc. of each category name on the X-axis. | array |
| max | The maximum value of the X-axis (when categories are empty). If null, the maximum value will be automatically matched based on the X-axis data. | null |
| min | The minimum value of the X-axis (when categories are 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 xAxis options, please refer to the parameters in the table above, and they are not listed separately here.
Series: Series Options
Series options are used to set the 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 an array or JSON formatted data. E.g., data:[0, 5, 3, 5], or data: [{name: 'Point 1', y: 0}, {name: 'Point 2', y: 5}] | '' |
| name | The name displayed for the data series. | '' |
| type | The type of the data series, supports area, areaspline, bar, column, line, pie, scatter, or spline | line |
plotOptions: Plot Options
plotOptions are used to set the properties related to the data points in the chart. plotOptions vary slightly depending on the chart type, and the commonly used options are listed here.
| Parameter | Description | Default Value |
|---|---|---|
| enabled | Whether to display data directly on the data points | false |
| allowPointSelect | Whether to allow mouse selection of data points | false |
| formatter | Callback function, formats the display content of the data | formatter: function() {return this.y;} |
Tooltip: Tooltip Options
Tooltip is used to set the information displayed in the tooltip when the mouse hovers over the data points.
| Parameter | Description | Default Value |
|---|---|---|
| enabled | Whether to display the tooltip | true |
| backgroundColor | Set the background color of the tooltip | rgba(255, 255, 255, .85) |
| borderColor | Tooltip border color, defaults to auto-matching the color of the data series | auto |
| borderRadius | Tooltip border radius | 5 |
| shadow | Whether to display the tooltip shadow | true |
| style | Set the content style of the tooltip, such as font color, etc. | color:'#333' |
| formatter | Callback function, used to format the output 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 the properties related to the legend.
| Parameter | Description | Default Value |
|---|---|---|
| layout | Display format, supports 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 display the legend | true |
| floating | Whether it can float, in conjunction with x, y properties. | false |
| shadow | Whether to display the shadow | false |
| style | Set the content style of the legend | '' |
For more detailed information, please refer to the Highcharts official English documentation: http://api.highcharts.com/highcharts