Highcharts configuration options are described in detail
Highcharts configuration options provide a lot of parameters, you can easily customized to meet user requirements charts in this section to find out more Highcharts configuration options for use:
Configuration parameters (attributes + Event)
chart.events.addSeries: Add the number of columns to the chart.
chart.events.click: Click on an event the entire chart plot area occurred.
chart.events.load: Chart load event.
chart.events.redraw: chart redraw event, click on the legend shows and can trigger hidden drawing.
chart.events.selection: When the chart curve selectable zoom, select the chart when operation can trigger the event.
chart.height: height chart drawn.
chart.inverted: chart x, y-axis on the exchange.
chart.polar: whether the polar chart.
chart.reflow: when the window size changes, the width of the chart adaptive window size changes.
chart.renderTo: loading the chart, is a DOM object on the page.
chart.showAxes: blank chart, whether to display axes.
chart.type: chart type, default line, there are bar / column / pie ......
chart.width: the width of the plot area of the chart, the default is adaptive.
chart.zoomType: amplification type data in the chart of the report, you can zoom in to the X-axis or Y-axis zoom, you can zoom in XY axes simultaneously.
colors: Most columns in the chart, the number of columns between each color. Is an array, generally do not move.
credits .enabled: whether to allow the display of copyright information.
credits.href: link copyrighted.
credits.text: copyright information display text.
exporting .buttons.exportButton.enabled: whether to allow the display Export button.
exporting.buttons.exportButton.menuItems: Export button menu option.
exporting.buttons.exportButton.onclick: Export button is clicked event, not internal menu.
exporting.buttons.printButton.enabled: whether to allow the Print button.
exporting.buttons.printButton.onclick: print button click event.
exporting.enabled: Print and Export buttons are allowed.
exporting.filename: is the file name of the export file.
exporting.type: Default export picture file formats.
exporting.url: SVG conversion chart and export processing interface address.
exporing.width: default export picture width.
labels: labels can be loaded into any position of the chart, there are items, style.
lang: language parameter configuration, and configuration related to the Export button menu, name and other configuration time.
legend.enabled: whether to allow Legend.
navigation.buttonOptions.enabled: chart navigation buttons whether all that can be clicked.
plotOptions .area.allowPointSelect: whether to allow the click data points.
plotOptions.area.color: Drawing color.
plotOptions.area.dataLabels.enabled: whether to allow the data labels.
plotOptions.area.enableMouseTracking: whether to allow the data in the chart, mouse tracking bubble data point is displayed.
plotOptions.area.events.checkboxClick: data in the chart legend checkbox click event.
plotOptions.area.events.click: data charts, data points click event.
plotOptions.area.events.hide: data chart, a data sequence of events when hidden.
plotOptions.area.events.show: data chart, a data sequence of events when displayed.
plotOptions.area.events.legendItemClick: data chart, the legend of the event item is clicked, the direct assignment false, it is not clickable.
plotOptions.area.events.mouseOut: mouse data points out of the event.
plotOptions.area.events.mouseOver: mouse data points after the event.
plotOptions.area.marker.enabled: whether to display the chart drawing point tag.
plotOptions.area.marker.states.hover.enabled: whether to allow tag rollover state.
plotOptions.area.marker.states.select.enabled: whether to allow tag selection status.
plotOptions.area.point.events.click: chart every single point click event.
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove: Event deleted chart points are used.
plotOptions.area.point.events.select: Select the chart midpoint event.
plotOptions.area.point.events.unselect: Event chart midpoint when deselected.
plotOptions.area.point.events.update: update event occurs when the data in the chart.
plotOptions.area.visible: When loading the default data series is displayed or hidden.
plotOptions.area.zIndex: In the case of multiple sequences, adjust the stacking order of each sequence.
Above point.events same also applies to the other area of class diagrams (arearange, areaspline, areasplinerange), other histogram (bar, column) and all charts.
plotOptions.area.showInLegend: whether to show in the legend.
plotOptions.area.stacking: is the value of the stack, the stack or as a percentage.
plotOptions.area.states.hover.enabled: whether to allow the state to put the mouse.
plotOptions.area.stickyTracking: sticky mouse tracking data points.
plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange similar to the plotOptions.area
plotOptions.bar.groupPadding: For bar charts packet interval between each packet.
plotOptions.bar.grouping: whether to group the data.
plotOptions.bar.minPointLength :: Defines the point value is zero, the point of the minimum length for
plotOptions.bar.showInLegend: whether to show in the legend.
plotOptions.bar.stacking: is the value of the stack, the stack or as a percentage (normal / percent).
plotOptions.column, plotOptions.columnrange similar to the plotOptions.bar
plotOptions.line related configuration is similar plotOptions.area configuration.
plotOptions.pie.ignoreHiddenPoint: In the pie chart, a particular sequence by Legend click to hide, the entire pie chart is 100% re-assignment, or hidden only on the basis of the original, showing a gap.
plotOptions.pie.innerSize: When drawing a pie chart, pie chart center to reserve much blank.
plotOptions.pie.slicedOffset: allowPointSelect use in conjunction with, when the point is clicked, the corresponding sector peel, this configuration parameter that is spaced at a distance.
Other common configuration parameters plotOptions.pie resemblance to plotOptions.area, plotOptions.scatter, plotOptions.series, plotOptions.spline related configuration similar plotOptions.area configuration.
series: an array.
series.data.color: one color data.
series.data.dataLabels: one sequence data label data.
series.data.events similar to the configuration of plotOptions.area.point.events.
series.data.marker similar to the configuration of plotOptions.area.marker.
series.data.name: name of the configuration data points.
series.data.sliced: Configure the pie chart, the distance separating the sector size.
series.data.x: x value of the point.
series.data.y: y value of the point.
series.name: name of the data sequence.
series.stack: stacked group index.
series.type: data sequence display type.
series.xAxis, series.yAxis: when using multiple axes, specifies which axis corresponds to a number of columns.
subtitle: Configuring the subtitle of the chart.
title: the title of the chart configuration.
tooltip: Configure bubble prompt data in the chart.
tooltip.valueDecimals: Allow decimal places.
tooltip.percentageDecimals: Allow percentage of decimal places.
xAxis, yAxis axis configuration settings
allowDecimals: whether to allow the axis decimals.
categories: an array of classification axes.
plotLines: Draw the main line.
tickColor: color scale.
tickInterval: step value scale.
labels.rotation: scale labels degree of rotation
Chart: chart area option
Chart chart area chart area option is used to set the properties.
| parameter | description | Defaults |
|---|---|---|
| backgroundColor | Setting chart area background color | #FFFFFF |
| borderWidth | Set the chart border width | 0 |
| borderRadius | Setting the border, rounded angles | 5 |
| renderTo | Chart placing containers, generally placed in a DIV html, get the DIV id attribute value | null |
| defaultSeriesType | The default chart type line, spline, area, areaspline, column, bar, pie, scatter | 0 |
| width | Chart width, according to the chart container default width adaptive | null |
| height | Height chart, the default chart container according to highly adaptive | null |
| margin | And other elements in the chart pitch array, such as [0,0,0,0] | [Null] |
| plotBackgroundColor | Background color main chart area background color, the X and Y axes of the enclosed area | null |
| plotBorderColor | The color of the border region borders the main graph, the X and Y axes of the enclosed area | null |
| plotBorderWidth | Width of the main chart area border | 0 |
| shadow | Shadow is set, you need to set the background color backgroundColor. | false |
| reflow | Whether using the chart area from the height and width, if not set width and height, the size will be adaptive. | true |
| zoomType | Drag the mouse to zoom, zoom along the x or y axis, can be set to: 'x', 'y', 'xy' | '' |
| events | Event callback support addSeries method, click the method, load method, selection method of the callback function. |
Color: Color Options
Color options for setting color chart color scheme.
| parameter | description | Defaults |
| color | For color display, an array of charts, line / bar / pie chart so on. | array |
Highcharts already provides several default color scheme, when you want to display color graphics more than kind, more graphics will automatically start from the first color scheme selection. Custom color scheme approach:
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});Title: Title Options
Title caption option is used to set the relevant properties of the chart title.
| parameter | description | Defaults |
|---|---|---|
| text | The title text. | Chart title |
| align | Horizontal alignment. | center |
| verticalAlign | Vertical alignment. | top |
| margin | Between the main title and subtitle or chart pitch range. | 15 |
| floating | Whether floating, if true, the title may be offset from the main chart area, with x, y attribute. | false |
| style | Set CSS styles. | {Color: '# 3E576F', fontSize: '16px'} |
Subtitle: subtitle options
Property Options subtitle provide substantially the same title with the title, the title can refer to the above options, it is worth mentioning that the subtitle text option defaults to '', that is empty, so the subtitle is not displayed by default.
xAxis: X axis option
X axis option is used to set the chart X-axis related properties.
| parameter | description | Defaults |
|---|---|---|
| categories | Set the X axis category names, arrays, for example: categories: [ 'Apples', 'Bananas', 'Oranges'] | [] |
| title | X Axis name, support text, enabled, align, rotation, style and other attributes | |
| labels | Set the X axis of each category name style style, format formatter, the angle of rotation and the like. | array |
| max | X-axis maximum value (categories is empty), if it is null, then the maximum value will automatically match the X-axis data to a maximum. | null |
| min | X axis minimum (categories is empty), if it is null, then the minimum value will automatically match the X-axis data to a minimum. | array |
| gridLineColor | Grid (vertical) Color | # C0C0C0 |
| gridLineWidth | Grid (vertical bar) width | 1 |
| lineColor | Baseline color | # C0D0E0 |
| lineWidth | Base line width | 0 |
yAxis: Y axis option
Y-axis option is consistent with the above-mentioned xAxis options, please refer to the table in the parameter settings are no longer listed separately.
Series: Data Column Options
Data Columns option is used to set the chart to show data related properties.
| parameter | description | Defaults |
|---|---|---|
| data | Displayed in the chart data 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 | Column data types, support area, areaspline, bar, column, line, pie, scatter or spline | line |
plotOptions: data point options
plotOptions used to set the chart data points related properties. plotOptions According to various chart types, their properties set slightly different, now commonly used options listed.
| parameter | description | Defaults |
| enabled | Data is displayed directly on the data points | false |
| allowPointSelect | Whether to allow the use of the mouse to select the data points | false |
| formatter | Callback function, data display format | formatter: function () {return this.y;} |
Tooltip: balloon data points
Tooltip information for setting the prompt box when the mouse slide data point is displayed.
| parameter | description | Defaults |
| enabled | Whether to display the prompt box | true |
| backgroundColor | Set the background color balloon | rgba (255, 255, 255, .85) |
| borderColor | Balloon border color, default data column automatically match the color | auto |
| borderRadius | Balloon round angle | 5 |
| shadow | Whether to display the prompt box shadows | true |
| style | Setting balloon content styles, such as font color, etc. | color: '# 333' |
| formatter | Callback function to format the output of balloon display. Back support content such as html tags: <b>, <strong>, <i>, <em>, <br/>, <span> | 2 |
Legend: Legend Option
legend legend is used to set the properties.
| parameter | description | Defaults |
|---|---|---|
| layout | Display format, vertical vertical and horizontal level of support | 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 | I can float, with x, y properties. | false |
| shadow | Whether to display shadows | false |
| style | The content of the legend style | '' |
For more detailed information, refer to the official website of the English documentation highcharts: http://api.highcharts.com/highcharts