react-chartjs-2 keep x axis always 0% to 100%

user_17261215 0
Viewed 336

I am trying to create a react-chartjs-2 Bar graph.

I want to keep the x axis always 0% to 100%.

Now the graph displays only the maximum % in x axis (if 80% is the x value then x axis max is set as 80)

scales: {
  x: {
    ticks: {
      color: "white",
      beginAtZero: true,
      max: 100%,
    },
    grid: {
      display: false, // Hide x grid
    },
  },
  y: {
    ticks: {
      color: "white",
    },
    grid: {
      display: false, // Hide y grid
    },
  },
},
chart.js reactjs
1 Answers

Looking at the docs for the Chart component options they point to the Chart.js docs where the max scale is set under a scale attribute, you have it inside the ticks property, try:

...
  x: {
    ticks: {
      color: "white",
      beginAtZero: true,
    },
    grid: {
      display: false, // Hide x grid
    },
    max: 100,
  },
...
user_6591490
Related