[Chartjs]-How to remove X and Y axis with react-chartjs-2

8👍

In React-chartjs-2 if you want to hide the axis label you’ll have to configure the chartOptions.

Here’s how you can hide the label, sure you can play around with a lot of other options by checking the examples.

React-chartjs-2 examples

const CHARTOPTIONS = {
  responsive: true,
  plugins: {
    legend: {
      display: false,
    },
  },

  // Modify the axis by adding scales
  scales: {
    // to remove the labels
    x: {
      ticks: {
        display: false,
      },

      // to remove the x-axis grid
      grid: {
        drawBorder: false,
        display: false,
      },
    },
    // to remove the y-axis labels
    y: {
      ticks: {
        display: false,
        beginAtZero: true,
      },
      // to remove the y-axis grid
      grid: {
        drawBorder: false,
        display: false,
      },
    },
  },
};

1👍

Check border configuration from documentation

const options = {
scales: {
  x: {
    grid: {
      display: false
    },
    border:{
      display:false
    }
  },
  y: {
    grid: {
      display: false
    },
    border:{
      display:false
    }
  },
 },
};

0👍

put this react-chart.js property in your according to the axis:

beginAtZero: true

Leave a comment