Highcharts configuration options detailed description

Highcharts provides a large number of configuration option parameters. You can easily customize charts that meet user requirements. This chapter introduces the usage instructions of Highcharts configuration options in detail:

Parameter configuration (Properties + Events)

chart.events.addSeries: Add a series to the chart.
chart.events.click: Click event that occurs on the drawing area of the entire chart.
chart.events.load: Chart loading event.
chart.events.redraw: Chart redraw event, which can be triggered when the legend is clicked to show and hide the drawing.
chart.events.selection: When the chart curve can be selectively enlarged, this event can be triggered when the chart operation is selected.
chart.height: The height value of the chart drawn.
chart.inverted: The x and y axes in the chart are inverted.
chart.polar: Whether it is a polar chart.
chart.reflow: When the window size changes, the chart width adapts to the window size change.
chart.renderTo: The location where the chart is loaded is a DOM object on the page.
chart.showAxes: In a blank chart, whether to display the coordinate axes.
chart.type: The type of chart, the default is line, and bar/column/pie...
chart.width: Chart. The width of the drawing area, the default is adaptive.
chart.zoomType: The zoom type of the data report in the chart. You can zoom in on the X-axis, Y-axis, or both.
colors: When there are multiple columns in the chart, the colors between the columns. It is an array and generally does not move.
credits.enabled: Whether to allow display of copyright information.
credits.href: Copyright link.
credits.text: Copyright information display text.
exporting.buttons.exportButton.enabled: Whether to allow the export button to be displayed.
exporting.buttons.exportButton.menuItems: Menu options for export buttons.
exporting.buttons.exportButton.onclick: Export button click event, not the internal menu.
exporting.buttons.printButton.enabled: Whether to allow printing buttons.
exporting.buttons.printButton.onclick: Print button click event.
exporting.enabled: Whether the print and export buttons are allowed.
exporting.filename: The file name of the exported file.
exporting.type: The default file format for exporting images.
exporting.url: The interface processing address for converting and exporting SVG charts.
exporing.width: The width of the default exported image.
labels: Labels can be loaded to any position in the chart, containing items and style.
lang: Language parameter configuration, configuration related to the export button menu, configuration of time name, etc.
legend.enabled: Whether to allow legends.
navigation.buttonOptions.enabled: Whether the buttons in all navigations in the chart can be clicked.
plotOptions.area.allowPointSelect: Whether to allow clicking on data points.
plotOptions.area.color: The color of the plot.
plotOptions.area.dataLabels.enabled: Whether to allow data labels.
plotOptions.area.enableMouseTracking: Whether to allow the display of mouse tracking bubbles for data points in data charts.
plotOptions.area.events.checkboxClick: Click event for the check box in the legend in the data chart.
plotOptions.area.events.click: The click event of the data point in the data chart.
plotOptions.area.events.hide: Event when a certain data series is hidden in the data chart.
plotOptions.area.events.show: Event when a certain data series is displayed in the data chart.
plotOptions.area.events.legendItemClick: In the data chart, the event occurs when the item in the legend is clicked. If you directly assign false, it will not be clickable.
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 to display point markers in the plot in the chart.
plotOptions.area.marker.states.hover.enabled: Whether to allow the mouse over state of the marker.
plotOptions.area.marker.states.select.enabled: Whether to allow the selection state of the marker.
plotOptions.area.point.events.click: Each individual point click event in the chart.
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove: Event when a point in the chart is deleted.
plotOptions.area.point.events.select: Chart midpoint selection event.
plotOptions.area.point.events.unselect: Event when the center point of the chart is unselected.
plotOptions.area.point.events.update: Event when the data in the chart is updated.
plotOptions.area.visible: When loading, whether the data series is displayed or hidden by default.
plotOptions.area.zIndex: In the case of multiple sequences, adjust the stacking order of each sequence.
The above point.events are also applicable to other area charts (arearange, areaspline, areasplinerange), other histograms (bar, column) and all charts.
plotOptions.area.showInLegend: Whether to display in the legend.
plotOptions.area.stacking: Whether to stack by value or percentage.
plotOptions.area.states.hover.enabled: Whether the state where the mouse is placed is allowed.
plotOptions.area.stickyTracking: Mouse sticky tracking data points.
plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange are similar to plotOptions.area
##plotOptions.bar.groupPadding: for bar charts Groups, intervals between each group.
plotOptions.bar.grouping: Whether to group data.
plotOptions.bar.minPointLength:: Defines the minimum length of the point when the point value is zero
plotOptions.bar.showInLegend: Whether it is Shown in legend.
plotOptions.bar.stacking: Whether to stack by value or percentage (normal/percent).
plotOptions.column, plotOptions.columnrange is similar to plotOptions.bar
The related configuration of plotOptions.line is similar to the plotOptions.area configuration.
plotOptions.pie.ignoreHiddenPoint: In the pie chart, after a certain series is hidden by clicking on the legend, should the entire pie chart be redistributed to 100%, or only based on the original chart? Hidden on top, showing a gap.
plotOptions.pie.innerSize: When drawing a pie chart, how much space should be left in the center of the pie chart.
plotOptions.pie.slicedOffset: Used in conjunction with allowPointSelect, when a point is clicked, the corresponding sector is peeled off. This parameter configures the distance away.
Other common configuration parameters of plotOptions.pie are similar to plotOptions.area, plotOptions.scatter, plotOptions.series, and the related configuration of plotOptions.spline is similar to plotOptions.area configuration.
series: is an array.
series.data.color: The color of a certain data.
series.data.dataLabels: Data labels for a certain data in the sequence.
series.data.events is similar to the related configuration of plotOptions.area.point.events.
series.data.marker is similar to the related configuration of plotOptions.area.marker.
series.data.name: Configure the name of the data point.
series.data.sliced: Configure the separation distance of sectors in a pie chart.
series.data.x: x value of the point.
series.data.y: y value of the point.
series.name: The name of the data series.
series.stack: Stacked grouping index.
series.type: Display type of data series.
series.xAxis, series.yAxis: When using multiple coordinate axes, specify which coordinate axis a certain sequence corresponds to.
subtitle: Configure the subtitle of the chart.
title: Configure the title of the chart.
tooltip: Configure bubble tips for data in the chart.
tooltip.valueDecimals: Number of decimal points allowed.
tooltip.percentageDecimals: Number of decimal places allowed for percentages.
xAxis, yAxis configuration settings coordinate axis
allowDecimals: Whether decimals are allowed on the coordinate axis.
categories: It is an array, the classification of the coordinate axis.
plotLines: Draw main lines.
tickColor: tick color.
tickInterval: The step value of the scale.
labels.rotation: Scale label rotation degree

Chart: Chart area options

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

##renderToContainer for chart placement, usually in html Place a DIV and get the id attribute value of the DIVnulldefaultSeriesTypeDefault chart type line, spline, area, areaspline, column, bar , pie , scatter0widthChart width, the default width is adaptive according to the chart containernullheightChart height, the default height is adaptive according to the chart containernullmarginSet the spacing between the chart and other elements, array, such as [0,0,0,0][null]plotBackgroundColorBackground color of the main chart area, that is, the background color of the area surrounded by the X-axis and Y-axisnull##plotBorderColor##plotBorderWidthThe width of the border of the main chart area0shadowWhether to set the shadow, you need to set the background color backgroundColor. falsereflowWhether to use the height and width of the chart area automatically. If width and height are not set, the size will be adaptive. truezoomTypeDrag the mouse to zoom, zoom along the x-axis or y-axis, can be set to: 'x',' y','xy'''events event callback, supports addSeries method, click method, load method, selection method, etc. Callback. Color: Color option

Parameter	Description	Default value
backgroundColor	Set the chart area Background color	#FFFFFF
borderWidth	Set chart border width	0
borderRadius	Set the chart border fillet angle	5






Main chart area The color of the border, that is, the border color of the area surrounded by the X-axis and Y-axis	null

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

ParameterDescriptionDefault valuecolor Color and array form used to display charts, line/column/pie and other charts. array

Highcharts has provided multiple color schemes by default. When there are more graphics to be displayed than color types, the extra graphics will automatically be selected from the first color scheme. Methods to customize the color scheme:

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

Title: Title option

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

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

Subtitle: Subtitle options

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

xAxis: X-axis option

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

yAxis: Y-axis options

The Y-axis options are basically the same as the above xAxis options. Please refer to the parameter settings in the above table and will not be listed separately.

Series: Data column options

The data column options are used to set properties related to the data to be displayed in the chart.

Parameters	Description	Default value
categories	Set the X-axis category name, array, for example: categories: ['Apples', 'Bananas', 'Oranges']	[]
title	X-axis name, supports text, enabled, align, rotation, style and other attributes
labels	Set the name of each category on the X-axis Style, formatter, angle rotation, etc.	array
max	X-axis maximum value (when categories is empty), if it is null, the maximum value will be automatically based on the X-axis data Matches a maximum value.	null
min	X-axis minimum value (when categories is empty), if it is null, the minimum value will be automatically based on the X-axis data Matches a minimum value.	array
gridLineColor	Grid (vertical line) color	#C0C0C0
gridLineWidth	Grid (vertical line) width	1
lineColor	Baseline color	#C0D0E0
lineWidth	Baseline Width	0

##name Display the name of the data column. ''typeData column type, supports area, areaspline, bar, column, line, pie, scatter or splineline

Parameters	Description	Default value
data	The data columns displayed in the chart can be arrays or data in JSON format. For example: data:[0, 5, 3, 5], or data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]	''

plotOptions: Data point options

plotOptions is used to set properties related to data points in the chart. plotOptions has slightly different property settings according to various chart types. Common options are now listed.

ParametersDescriptionDefault valueenabled Whether to display data directly on the data pointsfalseallowPointSelectWhether to allow the use of the mouse to select data pointsfalseformatterCallback function, formatted data display contentformatter: function() {return this.y;}

Tooltip: Data point prompt box

Tooltip is used to set the prompt box information displayed when the mouse slides to the data point.

Parameters	Description	Default value
enabled	Whether to display the prompt box	true
backgroundColor	Set the background color of the prompt box	rgba(255, 255, 255, .85)
borderColor	The border color of the prompt box, which automatically matches the color of the data column by default	auto
borderRadius	Prompt box circle angle	5
shadow	Whether to display the prompt box shadow	true
style	Set the prompt box content style, such as font color, etc.	color:'#333'
formatter	Callback function, used to format the display content of the output prompt box. The returned content supports html tags such as: <b>, <strong>, <i>, <em>, <br/>, <span>	2

Legend: Legend option

legend is used to set legend related properties.

Parameters	Description	Default value
layout	The display format supports 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, with x, y attributes.	false
shadow	Whether to display the shadow	false
style	Set the legend content style	''

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