Linear x axis for bar chart chartjs

Question

I am using chartjs 2.9.3. I want to have linear scale for x axis for bar plots. It should work just like any linear scale of line plots representing negative, decimal, positive values.

I have managed to create almost similar scale here using this options.

 scales: {
    xAxes: [
      {
        type: "time",
        time: {
          parser: "Y",
          unit: "year",
          displayFormats: {
            year: "Y"
          }
        },
      }
    ]
  },

But it is not working for decimal values, when dataset has negative x values, it is just rounding off to integer and placing the bar at that position.

How can represent decimal values as well?

Chartjs >=3.0.0 has introduced linear scale for bar plots. But this version has some other bugs in it so I am stuck with 2.9.3 version

adelriosantiago adelriosantiago · Accepted Answer · 2021-04-22T21:38:30

I don't recommend to change the axis type to time, as this will introduce several other issues given that there are not "fractional times". And adding support for it is not that easy.

The best bet is to create your own labels with a custom function. For example:

    const f = () => {
      let a = [];
      for (let n = -30; n <= 30; n++) {
        a.push(n / 100 + "");
      }
      return a;
    };

To generate from -3.00 to +3.00 (zeros representing decimal places). The bigger the numbers 30 and 100 the bigger the "resolution" of your linear scale.

Demo: https://codesandbox.io/s/react-chartjs-2-example-forked-26bbx?file=/src/index.js

Linear x axis for bar chart chartjs

1 Answers