How to add space to start and end of x-axis in chartjs on react....i have tried using "offset:true" but it does not work if the label are more

Question

Currently it look like this - https://mm5qkg.csb.app/ --- sandbox

Using "offset:true" is working if the labels are less but it start decreasing as the label quantity start increasing

I tried many solution but it didn't work

I am using it with react-chartjs-2

I'm confused about `data.labels`. Should this not rather be `[4.0, 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7, 4.8, 4.9, 5.0, ... ]` instead of `[4.0, 4.01, 4.02, 4.03, 4.04, 4.05, 4.06, 4.07, 4.08, 4.09, 5.0, ... ]`? — uminder, Aug 18 '22 at 08:01

score 1 · Accepted Answer · answered Aug 18 '22 at 08:18

Your x-axis could be defined of type: 'linear' and the data as an array of objects, having an x and y property each. Then you can use ticks.min and ticks.max to define the range that should be displayed in the chart.

const values = [0, 53, 85, 0, 0, 65, 5, 18, 2, 44, 2, 2, 42, 44, 21, 55];

const valueXStart = 4;

const options = {
  scales: {
    xAxes: [
      {
        type: 'linear',
        ticks: {
          min: 3.8,
          max: 7,
          stepSize: 0.1
        }
      }
    ]
  }
};

const data = {
  datasets: [
    {
      label: "First dataset",
      data: values.map((v, i) => ({ x: valueXStart + i * 0.1, y: v })),
      ...
    }
  ]
};

Please take a look at your amended CodeSandbox and see how it works.

How to add space to start and end of x-axis in chartjs on react....i have tried using "offset:true" but it does not work if the label are more

1 Answers1