1 thought on “overlapping bar graph with bar different width

  1. 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.

Comments are closed.