Preface
All charts except pie charts have X-axis and Y-axis. By default, the x-axis is displayed at the bottom of the chart and the y-axis is displayed on the left (with multiple y-axis, it can be displayed on the left and right sides). By setting chart.inverted = true , the x-y-axis display positions can be adjusted.
Let’s learn the coordinate axes of Highcharts together.
tags:
1. Title
xAxis:{ title:{ text:'x-axis title' }}yAxis:{ title:{ text:'y-axis title' }}2. Tags
labels:enabled, formatter, setp
yAxis:{ labels:{ enabled:true, formatter:function(){ if(this.value <=3) { return "first level("+this.value+")"; }else if(this.value >3 && this.value <=5) { return "second level("+this.value+")"; }else { return "third level("+this.value+")"; } }, step:1 //Search several lines to be displayed once}3. Mesh
1.gridLineWidth
Grid line width. The default x-axis is 0, and the default y-axis is 1px.
2.gridLineColor
Grid line color. The default is : #C0C0C0 .
3.gridLineDashStyle
Grid line line style. Similar to Css border-style, commonly used ones include: Solid, Dot, and Dash .
yAxis:{ //gridLineWidth:'1px', //Note that if this property gridLineDashStyle is used, it will not work gridLineColor:'#019000', gridLineDashStyle:'Dash',}4. Type
xAxis:{ categories:['A','B','C'] },yAxis:{ type:'datetime' },5.reversed
Inversion is to flip the axis instead of x and y to adjust. For example, the result of inverting the y-axis is that the y-axis starts from the largest value, and the minimum value is in the bottom
xAxis:{ categories:['A','B','C'], reversed:true }, yAxis:{ type:'datetime', reversed:true },6.opposite
When its value is set to true, the positions displayed on the x-axis and y-axis are up and down, and left and right respectively.
xAxis:{ categories:['A','B','C'], opposite:true }, yAxis:{ type:'datetime', opposite:true }7.inverted
chart:{ type:'line', style:{ fontSize:"17px", }, inverted:true }8.min,max
Controls the minimum and maximum values of the number axis.
Note: Controlling allowDecimals, min, max properties, you can easily control the display range of the number axis, etc. (This is also a very common problem)
Summarize
The above is all about this article. Have you learned it? The editor will continue to update Highcharts' articles. Friends who are interested in Highcharts should continue to pay attention to Wulin.com. I hope this article will help you learn.