CODEWITHSUNDEEP
javascriptchart.jsdata-visualizationreact-chartjs
Harrison Cramer
Harrison Cramer

Reputation: 4496

React ChartJS -- Scale Bar Chart Vertically With More Datasets

I'm using React ChartJS to build a bar chart which currently looks like thisReactJS Bar Chart

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.

Upvotes: 1

Views: 850

Answers (1)

uminder
uminder

Reputation: 26150

First you could wrap the canvas in a div.

<div id="chartWrapper">
  <canvas id="myChart"></canvas>
</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%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<div id="chartWrapper">
  <canvas id="myChart"></canvas>
</div>

Upvotes: 1

Related Questions