Keeping scales in sync across multiple graphs or dynamically changing scales

Question

Here's my use case: I have two charts, one on top of the other, as seen here. Ideally, they'd be two datasets in a single chart, but I couldn't come up with a way to start one chart halfway through the other (especially with the streaming delay). Regardless, both datasets should have the same scale max and min.

I could manually give them the same ticks: { min, max} on creation, but the range of values in my dataset is too large to set them once at the beginning and leave them. So, I have to let Chart.js figure out the scales for me based on the data currently in the chart. But since both lines have slightly different data, the generated scales vary slightly, and you can see them rescale at different times in the gif above.

I've tried setting the parent component's state with the larger chart's chart.scales["y-axis-0"].max and min from within the options: plugins: streaming: onRefresh: function, and then trying to set the other chart's values from that state within its onRefresh. But the second chart seems to be ignoring the updated values (or the values I'm setting don't actually control the scale).

So, what is the best way to keep scales in sync across multiple charts?

nagix nagix · Accepted Answer · 2018-07-23T18:55:15

Let's assume we have chart1 and chart2. In order to keep scales in sync across the both charts, first define updateScales() as follows.

function updateScales() {
    var datasets = chart1.data.datasets.concat(chart2.data.datasets);
    chart1.options.scales.yAxes[0].ticks = chart2.options.scales.yAxes[0].ticks = {
        suggestedMin: Math.min(...datasets.map(function(dataset) {
            return Math.min(...dataset.data.map(function(value) {
                return value.y;
            }));
        })),
        suggestedMax: Math.max(...datasets.map(function(dataset) {
            return Math.max(...dataset.data.map(function(value) {
                return value.y;
            }));
        }))
    };
    chart1.update();
    chart2.update();
}

Then, call updateScales() at the end of onRefresh in the both charts.

onRefresh: function(chart) {
    // Update your datasets here
    // ...
    updateScales();
}

See also this example: https://jsfiddle.net/nagix/se2ank5z/

Keeping scales in sync across multiple graphs or dynamically changing scales

1 Answers