Chartjs-Dynamically add x-axis in React using ChartJS

by

1👍

✅

There are 2 solutions for your problem, you can either provide your data in object format so the labels get taken from the object like so:

const data = [{x: '1', y: 5}, {x: '2', y: 3}];

Or you can add a second x axis with the correct ID to all the scales which has a labels array property in which you can specify the labels for that scale so you will get something like this:

const myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

myChart.options.scales['secondX'] = {
  labels: ['6', '7', '8'],
  position: 'bottom'
}

myChart.update();

Leave a comment