React ChartJS -- Scale Bar Chart Vertically With More Datasets

Question

I'm using React ChartJS to build a bar chart which currently looks like this

The data that this is built on top of is dynamic -- that is, there can be many more industries (or fewer). I'd like to fix the bar width (say, at 30 pixels) and to have the chart grow taller according to how many datasets that I have. In other words, I don't care how tall the chart is, it should be a function of how many datasets that I have.

How would I accomplish this?

I'd share the code I've got already but it's pretty generic, can post it here if folks would find that useful.

user_2358409 · Answer

First you could wrap the canvas in a div.

You can make use of the Plugin Core API and compute the chart height in the beforeRender hook depending on the defined data.barThickness and the visible datasets.

plugins: [{
  beforeRender : chart => {        
    if (!chart.config.options.nonChartAreaHeight) {
      var yAxis = chart.scales.y;
      chart.config.options.nonChartAreaHeight = chart.height - (yAxis.bottom - yAxis.top);
    }      
    const labelCount = chart.data.labels.length;
    const datasetCount = chart.data.datasets.map((ds, i) => chart.getDatasetMeta(i)).filter(m => !m.hidden).length;
    const chartAreaHeight = labelCount * datasetCount * chart.data.barThickness * 1.2;
      document.getElementById("chartWrapper").style.height = (chartAreaHeight + chart.config.options.nonChartAreaHeight) + 'px';      
  }
}],

Then you also need to define option.maintainAspectRatio: false to prevent Chart.js from resizing the canvas.

Please take a look at below runnable code and see how it works.

new Chart('myChart', {
  type: 'bar',
  plugins: [{
    beforeRender : chart => {        
      if (!chart.config.options.nonChartAreaHeight) {
        var yAxis = chart.scales.y;
        chart.config.options.nonChartAreaHeight = chart.height - (yAxis.bottom - yAxis.top);
      }      
      const labelCount = chart.data.labels.length;
      const datasetCount = chart.data.datasets.map((ds, i) => chart.getDatasetMeta(i)).filter(m => !m.hidden).length;
      const chartAreaHeight = labelCount * datasetCount * chart.data.barThickness * 1.2;
      document.getElementById("chartWrapper").style.height = (chartAreaHeight + chart.config.options.nonChartAreaHeight) + 'px';      
    }
  }],
  data: {
    labels: ['1', '2', '3', '4'], 
    barThickness: 30, // change this to adapt the bar thickness
    datasets: [{          
      label: 'Dataset 1',
      data: [40, 50, 60, 80],
      backgroundColor: 'red'       
    },
    { 
      label: 'Dataset 2',
      data: [100, 90, 80, 70],
      backgroundColor: 'blue' 
    },
    {   
      label: 'Dataset 3',
      data: [60, 80, 70, 90],
      backgroundColor: 'green'  
    }]
  },
  options: {
    indexAxis: 'y',
    maintainAspectRatio: false
  }
});

div {  
  width: 100%;
}

React ChartJS -- Scale Bar Chart Vertically With More Datasets

1 Answers