Is there a way to centerize the bars excluding missing data in a Grouped Bar Chart?

[yeongbin-jo]

I have one Bar Chart, and the source code is as follows.

<Bar
  data={{
    labels: ['Bar1', 'Bar2', 'Bar3'],
    datasets: [{
      label: 'Series1',
      data: [100, 40, 50],
    }, {
      label: 'Series2',
      data: [50, 60, null],
    }, {
      label: 'Series3',
      data: [null, 20, 30],
    }, {
      label: 'Series4',
      data: [null, null, 20],
    }]
  }}
/>

I would like to skip the case where data is null in this chart and output as below.

Any help would be greatly appreciated 🙏

[Udemology]

Hi @yeongbin-jo ,

There are 2 steps to get the results. Chartjs has a built in method which is remove the null bars but make all the other bars thicker. To keep them consistent you need a custom plugin which is the second step.

Watch this video to understand it: https://youtu.be/4yET6a8uX6U
This video is scheduled for 18 December but it is viewable until tomorrow after that I will place it back into the schedule.

The video should the entire process of both steps.

[hishd]

Thank you very much for the answer!
I was pulling my hair for the past two hours for finding a posible solution for this.
You saved me at last.
Chears...!!!!!!!