See this JSFiddle. How do I get the y-axis zero to align?
Chart showing use of multiple y-axes, where each series has a separate axis. Multiple axes allows data in different ranges to be visualized together. While this in some cases can cause charts to be hard to read, it can also be a powerful tool to illustrate correlations.
A simpler way to go about this is using the tickInterval attribute: yAxis: { title: { text: 'Percent' }, tickInterval: 10, labels: { formatter: function(){ return this. value + '%'; } } }, That will force your axis intervals to show up as you requested.
A multi-axis line chart is an interactive line chart that plots data using multiple axes. This allows plotting data sets having different units and scale ranges. Data values are plotted as data points that are connected by line segments. Multiple y-axes are rendered along the left and right side of the chart.
The short answer is: you can't.
You can tweak axis scaling, padding, and tick positions and the like and possibly get what you want, but there is no setting to accomplish this.
There is a feature request though, that you can add your votes and/or comments to:
http://highcharts.uservoice.com/forums/55896-general/suggestions/2554384-multiple-axis-alignment-control
EDIT: OTOH, I have to mention that dual axis charts like this are most often a very poor way to show the data, and invites the user to make comparisons that aren't valid.
While most people are always trying to put everything in one chart, multiple charts are very often the better solution.
FWIW
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With