How to remove Grid lines and axes in angular ng2-charts?

228 Views Asked by At

I am using Angular 16 and ng2-charts to display a basic line chart.I would like to remove the grid lines from the chart.I dont find an option to do that.Can someone help me with this?

   <div class="chart-wrapper" style="padding-left: 30px;">
              <canvas baseChart width="230" height="130" [datasets]="lineChartData" [labels]="lineChartLabels"
                [options]="lineChartOptions" [legend]="lineChartLegend" [type]="lineChartType">
              </canvas>
 </div>
lineChartData: any[] = [
    {
      data: [71, 72, 73, 72, 74, 75 ,85, 72, 78, 75, 77, 75],
      borderWidth: 1,
      backgroundColor: 'gray',
      borderColor: 'black',
      pointBackgroundColor: 'black',
      pointBorderColor: 'black',
      pointHoverBackgroundColor: 'gray',
      pointHoverBorderColor: 'gray',
      tension:0         
    },
  ];
  lineChartLabels: any[] = ['a', 'b', 'c', 'd', 'e', 'f','g', 'h', 'i', 'j', 'k', 'l'];
  lineChartOptions: ChartOptions = {
    responsive: true,     
    elements: {
      point: {
        radius: 0,
      },
      line: {
        borderWidth: 1
      }
    }   
  };
  lineChartLegend = false;
  lineChartPlugins = [];
  lineChartType: ChartType = 'line';
2

There are 2 best solutions below

0
alonso On BEST ANSWER

You can set the option to false like this:

lineChartOptions: ChartOptions  = {
    scales: {
      x: {
        grid: {
          display: false,
        },
      },
      y: {
        grid: {
          display: false,
        },
      },
    },
  };
0
Otmane Baraka On

To remove the grid lines, you can adjust the lineChartOptions to specify that grid lines should not display for both x and y axes.

Update your lineChartOptions as follows:

    lineChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      x: { // for x-axis
        grid: {
          display: false
        }
      },
      y: { // for y-axis
        grid: {
          display: false
        }
      }
    },
    elements: {
      point: {
        radius: 0,
      },
      line: {
        borderWidth: 1
      }
    }
};