.net Powerful JavaScript charts
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »


Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to hosted libraries.

More »


RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

Can the Bipolar chart have a different scale for each side?

Posted by Marcus at 19:41 on Monday 15th January 2024 [link]
How can I have different left and right x-axis on bipolar charts?
Something like:
Quantity of fuel buyed each month on the left (measured as thousands of liters), and
Average cost of fuel ($ per liter) each month on the right.

These are different, but related values that worth a bipolar chart.

Thank you in advance

Posted by Richard at 22:03 on Monday 15th January 2024 [link]
Yes, you can do that by using the clipping functionality and showing two charts - the left side of one and the right side of the other. I've made a demo of this for you here:

Posted by Marcus at 01:15 on Tuesday 16th January 2024 [link]
That´s a good solution, but I was wondering of X axis being automatically set as a flag, like this:
1. locked: min(left & right side data) to max(left & right side data), and
2. free: min and max for each side based on each side data, and finally
3. user defined: the user must set the values

1 is currently available


Posted by Richard at 12:24 on Tuesday 16th January 2024 [link]
I think that what you're asking can be achieved by using the xaxisScaleMax property. With this, you can stipulate what the maximum value is for the scale. I've updated the example so that the left object uses the xaxisScaleMax property to fix the maximum scale value at 60 and then it's null on the right-hand-side object so it's auto-generated to accommodate the data.

You can use this property on both objects or just one and set it to null on the other (you may not need to set it though on the second object if you don't use the spread (...) operator to reuse the first objects configuration).

As for a user-defined scale there isn't an xaxisScaleSpecific property for the Bipolar chart but I can add one for the next release.

Posted by Richard at 16:32 on Tuesday 16th January 2024 [link]
Ok, I've added the xaxisScaleSpecific property to the Bipolar chart and it will be a part of the next release. If you can't wait though you can get the updated library here:

And you'd use it like this:

new RGraph.Bipolar({
    id: 'cvs',
    left: [355,255,466,844,945,844,155],
    right: [153,425,684,514,645,846,165],
     options: {
        backgroundGridVlines: false,
        xaxis: false,
        xaxisScaleSpecific: ['High','Medium','Low','None'],
        yaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
        textSize: 18

Posted by Richard at 18:00 on Sunday 25th February 2024 [link]
A small note about the forthcoming clipping feature that i've added for version 6.17 - this style of Bipolar chart will be made even easier by clipping to the left half for one chart and the right half for another.

It's not available as I write this note but will be soon. And the process of adding clipping to your chart will be as simple as a configuration property like this:

clip: 'lefthalf'

[Replies are closed]