Chart.js: overlapping bar graph with bar different width

[karthiksd9]

I don't know whether it is possible or not. But here is my requirement:

I want a chart having 2 bar overlapped over one another (not stacked).
The width of inner bar should be smaller than the outer bar.

If this is possible can anyone post a sample code in fiddle.

Thanks in advance.

[etimberg]

@karthiksd9 this is mostly possible. You can take a look at #3849 to get some ideas

[karthiksd9]

@etimberg Thanks for the reply.
Overlapping bar graph is possible. But how to change the width of bar. I tried using 2 x-axis and set different thickness to it using barThickness. But its not working.
Here's the fiddle. https://jsfiddle.net/karthiksd9/17hvoa9t/8/

Finally i need one smaller size bar inside a larger one.

[karthiksd9]

@etimberg .Please help me. can this be achieved using categoryPercentageand barPercentagesomehow?

How to have 2 categoryPercentageand barPercentage in a same graph?

[etimberg]

It's unfortunately not possible to have 2 categoryPercentage options on the same graph. It might be easier to make a new chart type that places and sizes the bars the way you would like

[potatopeelings]

You could also write a plugin to override the thicknesses for one of the datasets after they have been set.

    Chart.plugins.register({
        afterDatasetsUpdate: function (chart) {
            Chart.helpers.each(chart.getDatasetMeta(0).data, function (rectangle, index) {
                rectangle._view.width = rectangle._model.width = 30;
            });
        },
    })

    ...

See https://jsfiddle.net/17hvoa9t/11/

However, since this messes around with the internal variables, I don't think there won't be a guarantee that it will work though version changes.

Cheers!

Note - because of https://github.com/chartjs/Chart.js/issues/3849, you can't use v2.5.0. You'll need to use v2.4.0 or the next release.

[potatopeelings]

I checked this again to figure out why the 2nd x axis wasn't working and realized you don't actually need a plugin that messes with internal variables.

For the same effect as above, set your 2nd x axis properties like so

    ...
    {
      display: false,
      stacked: true,
      id: "bar-x-axis2",
      barThickness: 70,
      // these are needed because the bar controller defaults set only the first x axis properties
      type: 'category',
      categoryPercentage: 0.8,
      barPercentage: 0.9,
      gridLines: {
        offsetGridLines: true
      }
    }],

The bar controller defaults (and the core controller's initConfig) set the first x axis's properties, but it doesn't do anything for your 2nd x axis - so we need to set it explicitly (including categoryPercentage and barPercentage - even if we are using only barThickness).

Fiddle - https://jsfiddle.net/17hvoa9t/12/

Note - the caveat about #3849 still holds. You can't use v2.5.0. You'll need to use v2.4.0 or the next release.

[karthiksd9]

WOW! @etimberg , @potatopeelings Thanks a lot guys. This is just perfect.