How to set up different widths for bars in chartjs?

Question

I am new to React and I want to set up different widths for bars, which looks like bar chart.

I am using react-chartjs but I failed to find a solution. My current code is:

const data = (canvas) => {
  const ctx = canvas.getContext("2d");
  return {
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [
      {
        data: [
          {x:this.props.reliefZone1.startPosition,y:100},
          {x:this.props.reliefZone2.startPosition,y:100},
          {x:this.props.shockZone1.startPosition,y:100},
          {x:this.props.shockZone2.startPosition,y:100}
        ],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)'
        ]
      }
    ]
  }
};

const options = {
  responsive: true,
  scales: {
    xAxes: [{ 
      scaleLabel: {
        display: true,
        labelString: 'Years'
      },
    }],
    yAxes: [{
      display: true,
      ticks: {
        min: -100,
        max: 100
      }
    }]
  }
};

And it looks like: My chart

@think-twice Thanks for the advice. I have edited the question. — Sheng Wu, Aug 27 '18 at 06:18
Did you try this trick: [https://stackoverflow.com/questions/42683812/multiple-bar-widths-in-chart-js-bar-chart](https://stackoverflow.com/questions/42683812/multiple-bar-widths-in-chart-js-bar-chart) — kaarto, Aug 27 '18 at 06:19
Have you tried adding width:['30%', '20%','40%','60%'] after backgroundColor in datasets? I am also new to react-charjs but logically hope this should work — Hemadri Dasari, Aug 27 '18 at 06:20
@kaarto this post has multiple datasets but i only have one. I want to have different widths for each bar. — Sheng Wu, Aug 27 '18 at 06:24
I don't think there's a simple way to do this. I'm not sure about react-chartjs, but for traditional chartjs here's a way to do this: [https://stackoverflow.com/questions/32138505/chart-js-dynamic-bar-width](https://stackoverflow.com/questions/32138505/chart-js-dynamic-bar-width) — kaarto, Aug 27 '18 at 09:02

How to set up different widths for bars in chartjs?

0 Answers0