Highcharts Pure JavaScript Chart usage explained

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: Charts chart area options chart area options are used to set the chart area related properties.    Parameter description default value BackgroundColor Set chart area background color #FFFFFFborderWidth Set chart border width 0borderRadius Set chart border fillet angle 5renderTo  The chart places a container that typically places a div in the HTML, gets the div's id attribute value nulldefaultseriestype default chart type line, spline, area, areaspline, column, bar, Pie,     Scatter 0width chart width, default according to the chart container adaptive width nullheight chart height, default based on the chart container adaptive height nullmargin Set the spacing between the chart and other elements, such as [0,0,0,0] [Null]plotbackgroundcolor the main chart area background color, which is the background color of the area around the x-axis and y-axis nullplotbordercolor The color of the main chart area border, which is the border color of the area of the x-axis and y-axis NULLPLOTB    Orderwidth whether the width of the main chart area border is 0shadow or not, the background color backgroundcolor needs to be set.    Falsereflow whether the height and width of the chart area are used, and if the width and height are not set, the size is adaptive.      Truezoomtype Drag the mouse to zoom, along the x-axis or y-axis, and can be set to: ' X ', ' y ', ' xy ' events callback, support Addseries method, click Method, Load method, selection method, and other callback functions. Color: Colors option color option sets the color scheme for the chart.    Parameter description The default value color is used to show charts, lines/bars/pie charts of the colors, array form. Arrayhighcharts hasMany color schemes are provided by default, and when you want to display more graphics than the color category, the extra graphics are automatically selected from the first color scheme. Ways to customize the color scheme: highcharts.setoptions ({colors: [' #058DC7 ', ' #50B432 ', ' #ED561B ', ' #DDDF00 ', ' #24CBE5 ', ' #64E572 ', ' #FF9655 ' ', ' #FFF263 ', ' #6AF9C4 ']}); Title: Caption option title option to set the caption-related properties of the chart.    The parameter describes the default value of the text content of the caption.    Chart titlealign Horizontal alignment.    Centerverticalalign vertical alignment.    TopMargin the spacing between the title and the subtitle or the main chart interval.    15floating is floating, if true, the caption can deviate from the main chart area and can be used with the X, Y property.    Falsestyle Set CSS styles. {color: ' #3E576F ', fontSize: ' 16px '} Subtitle: Subtitle Options subtitle provides the same property options as heading title, which can be referenced by the title option above, and it is worth mentioning that the subtitle text option defaults to ' ', which is empty, so the subtitle is not displayed by default. The xaxis:x axis option x axis option is used to set the chart X axis related properties. Parameter description Default value categories set X axis class name, array, for example: Categories: [' Apples ', ' Bananas ', ' oranges '] []title X-axis name, support text, enabled,    Align, rotation, style, and so on labels set the x-axis category name styles style, format formatter, angle rotation and so on.    Arraymax x-axis maximum value (categories is empty), if NULL, the maximum value automatically matches one maximum value based on the x-axis data.    Nullmin 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.   Arraygridlinecolor Grid (vertical bar) color #C0C0C0gridLineWidth Grid (vertical bar) Width 1lineColor baseline color #C0D0E0lineWidth baseline width 0yaxis: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 data column options are used to set properties related to the data to be displayed in the chart. Parameter description The default value data is displayed in the chart column, which can be an array or JSON-formatted data.    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 lineplotoptions: Data point options plotoptions used to set the Data point-related properties. The plotoptions has a slightly different set of properties depending on the chart type, and now lists the common options. Parameter description The default value enabled whether the data is displayed directly on the data point Falseallowpointselect allows the data point Falseformatter callback function to be selected with the mouse, and the formatted data displays the contents of F Ormatter:function () {return this.y;} ToolTip: The data point hint box tooltip is used to set the ToolTip information that is displayed when the mouse slides to a data point. Parameter description default value enabled whether Display prompt box Truebackgroundcolor set the background color of the prompt box (255, 255, 255,.) bordercolor hint box border color, default     Automatically match the color of the data column Autoborderradius the circle angle 5shadow whether the cue box is displayed shadow Truestyle set the ToolTip content style, such as 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> 2Legend: Legend options legend used to set legend-related properties.    The parameter describes the default layout display form, which supports horizontal horizontal and vertical vertical horizontalalign alignment.    Centerbackgroundcolor legend background color.    Nullbordercolor legend Border color.    #909090borderRadius legend Border Angle 5enabled displays whether the legend truefloating can float, with the X, Y property. Falseshadow whether to show shadow Falsestyle set legend content style

　　

Highcharts Pure JavaScript Chart usage explained