Chart.js: Vertically Stacked Charts sharing X-Axis

[tuckwat]

Probably a long shot but it would be great to have a way to stack charts so that there are multiple y-axes all sharing a single x-xis (example below). This type of chart is great for comparing different types of data clearly without overlapping multiple y-axes.

Any tips to get started with a plugin?

[etimberg]

@tuckwat you might get away with having 4 separate graphs but only showing the x axis on the bottom one. You could write something that makes sure the min/max of the other 3 are synchronized to the graph with a visible axis.

[etimberg]

Closing since my answer above is the best way to do this. I think the plugin would need to read some custom settings that link the charts together. Once v2.5 releases, you'll be able to add plugins to individual charts which makes this easier to do

[yhwu]

The above solution works when the ylables for all panels have the same widths. The y-axes won't line up when the labels have different widths. I use afterFit callback to line them up.

var ylabelwidth = 0;

// panel 1
config1 = {options: { scales: { yAxes: [ { afterFit: function(scaleInstance) { if ( ylabelwidth < scaleInstance.width) {ylabelwidth = scaleInstance.width} else {scaleInstance.width = ylabelwidth;}},},]}}}
// panel 2
config2 = {options: { scales: { yAxes: [ { afterFit: function(scaleInstance) { if ( ylabelwidth < scaleInstance.width) {ylabelwidth = scaleInstance.width} else {scaleInstance.width = ylabelwidth;}},},]}}}
// panel 3
config3 = {options: { scales: { yAxes: [ { afterFit: function(scaleInstance) { if ( ylabelwidth < scaleInstance.width) {ylabelwidth = scaleInstance.width} else {scaleInstance.width = ylabelwidth;}},},]}}}

// draw and get max ylabel width
c1 = new Chart(ctx1, config1);
c2 = new Chart(ctx2, config2 );
c3 = new Chart(ctx3, config3 );

// redraw
c1.destroy(); c2.destroy(); c3.destroy();
c1 = new Chart(ctx1, config1);
c2 = new Chart(ctx2, config2 );
c3 = new Chart(ctx3, config3 );

[loopezz]

Sorry for responding in a closed issue.

Is there a best practice since v2.5 for creating stacked charts with a shared axis?