reactjschart.jsreact-chartjsreact-chartjs-2

How can I remove the grid line in the background of the line chart?


I am working on a React JS project. In my project, I need to create line chart components. I am trying to use Chart JS 2 library for React JS. But, now I am having a little problem customising the line chart. I want to remove the grids and the lines in the background (screenshot) and the label at the top of the chart (My first dataset).

enter image description here

This is my code.

const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First dataset',
        fill: true,
        lineTension: 0.1,
        backgroundColor: '#edfce9',
        borderColor: '#3DAA1D',
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: '#3DAA1D',
        pointBackgroundColor: '#fff',
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: '#3DAA1D',
        pointHoverBorderColor: 'rgba(220,220,220,1)',
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: [65, 59, 80, 81, 56, 55, 40],
        showLine: true
      }
    ]
  };

 <Line data={data} />

How can I do that? Removing the grids (lines) in the background of the chart and removing the label at the top (My First dataset)?


Solution

  • Please take a look at the documentation. You can disable gridlines in the options (which you will have to add) https://www.chartjs.org/docs/2.9.4/axes/cartesian/#common-configuration

    options: {
      scales: {
        yAxes: [
          gridLines: {
            display: false
          }
        ],
        xAxes: [
          gridLines: {
            display: false
          }
        ]
      },
      legend: {
        display: false
      }
    }
    

    V3:

    options: {
      scales: {
        x: {
          grid: {
            display: false      
          }
        },
        y: {
          grid: {
            display: false      
          }
        }
      }
    }