Highcharts option Configuration Detailed documentation

Highcharts provides a number of options configuration parameters, you can easily customize to meet user requirements of the chart, the official website is only available in the English version of the development configuration documentation, and the Chinese version of the document online very little, and fragmented. Here, I have highcharts the most common parameters of the most important parameter options to organize into documents, to share with you.

Chart: Plot Area options

The chart plot area option is used to set the chart area related properties.

Parameters	Describe	Default value
BackgroundColor	Set the chart area background color	#FFFFFF
BorderWidth	Set chart Border width	0
Borderradius	Set chart Border Fillet angle	5
Renderto	The container that the chart is placed in, typically places a div in the HTML, gets the value of the div's id attribute	Null
Defaultseriestype	Default chart type line, spline, area, areaspline, column, bar, pie, scatter	0
Width	Chart width, default according to chart container adaptive width	Null
Height	Chart height, default according to chart container adaptive height	Null
Margin	Sets the spacing between the chart and other elements, as an array, such as [0,0,0,0]	[NULL]
Plotbackgroundcolor	Background color of the main chart area, which is the area surrounding the x-axis and y-axis	Null
Plotbordercolor	The color of the main chart area border, which is the border color of the area around the x-axis and y-axis	Null
Plotborderwidth	Width of the main chart area border	0
Shadow	If you set the shadow, you need to set the background color backgroundcolor.	False
Reflow	Whether the height and width of the chart area are used, and if width and height are not set, the size is adaptive.	True
Zoomtype	Zoom by dragging the mouse, zooming along the x or Y axis, can be set to: ' X ', ' y ', ' xy '	‘‘
Events	The callback functions of the Addseries method, the click Method, the Load method, the selection method, and so on, are supported by the event callback.

Color: Colors Options

The color color option is used to set the colors scheme for the chart.

Parameters	Describe	Default value
Color	Used for displaying charts, lines/bars/pie charts, etc., in the form of an array of colors.	Array

Highcharts already offers a variety of color schemes by default, and when you want to display more graphics than the color category, the extra graphics will automatically start with the first color scheme. Ways to customize the color scheme:

Highcharts.setoptions ({ Colors: Span class= "pun" >[ ' #058DC7 ' ,  ' #50B432 ' Span class= "pun" >,  ' #ED561B ' , ' #DDDF00 ' ,  ' #24CBE5 '   ' #64E572 ' ,  ' #FF9655 ' Span class= "pun" >,  ' #FFF263 ' , ' #6AF9C4 ' ]       

Title: Caption Options

The title Caption option sets the caption-related properties for the chart.

Parameters	Describe	Default value
Text	Title text content.	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	If true, the caption can deviate from the main chart area and can be used with the X, Y property.	False
Style	Sets the CSS style.	{color: ' #3E576F ', FontSize: ' 16px '}

Subtitle: Subtitle Options

The subtitle provides a property option that is roughly the same as the heading title, and can be referenced by the title option above, and it is worth mentioning that the subtitle's text option defaults to ' ', which is empty, so the subtitle is not displayed by default.

Xaxis:x axis Options

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

Parameters	Describe	Default value
Categories	Set 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 X-axis category name styles style, format formatter, angle rotation, etc.	Array
Max	The x-axis maximum value (categories is empty), and if NULL, the maximum value automatically matches a maximum value based on the x-axis data.	Null
Min	The x-axis minimum value (categories is empty), and if NULL, the minimum value automatically matches a minimum value based on the x-axis data.	Array
GridlineColor	Grid (vertical bar) color	#C0C0C0
Gridlinewidth	Grid (vertical bar) width	1
LineColor	Baseline color	#C0D0E0
LineWidth	Baseline width	0

Yaxis:y axis Options

The y-axis option is basically the same as the Xaxis option above, please refer to the parameter settings in the table above, no longer 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	Describe	Default value
Data	Data columns that are displayed in the chart can be data in arrays or in JSON format. such as: Data:[0, 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 type, support area, Areaspline, bar, column, line, pie, scatter or spline	Line

Plotoptions: Data point options

The plotoptions is used to set data point-related properties in a chart. The plotoptions has a slightly different set of properties depending on the chart type, and now lists the common options.

Parameters	Describe	Default value
Enabled	Whether to display data directly on data points	False
Allowpointselect	Whether to allow data points to be selected with the mouse	False
Formatter	callback function, format data display content	Formatter:function () {return this.y;}

ToolTip: Data point Prompt box

The tooltip is used to set the ToolTip information that is displayed when the mouse slides to a data point.

Parameters	Describe	Default value
Enabled	Whether to display a prompt box	True
BackgroundColor	Set the background color of the cue box	RGBA (255, 255, 255,. 85)
BorderColor	Hint box border color, default automatically matches the color of the data column	Auto
Borderradius	Tip Box Round Angle	5
Shadow	Whether to display a cue box shadow	True
Style	Set the content style of the cue box, such as font color	Color: ' #333 '
Formatter	callback function that is used to format the display of the output cue box. The returned content supports HTML tags such as: <b>, <strong>, <i>, <em>, <br/>, <span>	2

Legend: Legend Options

The legend is used to set legend-related properties.

Parameters	Describe	Default value
Layout	Display form, supports horizontal horizontal and vertical vertical	Horizontal
Align	The Alignment method.	Center
BackgroundColor	Legend background color.	Null
BorderColor	Legend border color.	#909090
Borderradius	Legend Border Angle	5
Enabled	Whether the legend is displayed	True
Floating	Whether it can float, with the X, Y property.	False
Shadow	Whether to show shadows	False
Style	Set legend content Style	‘‘

Highcharts option Configuration Detailed documentation