About
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 show charts on your website.

More »

 

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

More »

 

Download
Get the latest version of RGraph (version 6.16) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

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
Marcus

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:

https://codepen.io/rgraph/details/oNVBERg

Posted by Marcus at 01:15 on Tuesday 16th January 2024 [link]
Thanks!
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

TIA
Marcus

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:

https://raw.githubusercontent.com/heyesr/rgraph/main/libraries/RGraph.bipolar.js

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
    }
}).draw();

[Replies are now closed]