Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I force multiple y-axis in Highcharts to have a common zero

Tags:

highcharts

See this JSFiddle. How do I get the y-axis zero to align?

like image 801
Καrτhικ Avatar asked Apr 18 '13 14:04

Καrτhικ


People also ask

Can we plot two Y axis on the same chart in Highcharts?

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.

How do I change the y axis values in Highcharts?

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.

What is multiple axis?

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.


1 Answers

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

like image 150
jlbriggs Avatar answered Oct 05 '22 05:10

jlbriggs