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 »

 

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

More »

 

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 »

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

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

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

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.

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();

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'