angularchart.jsng2-charts

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


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';

Solution

  • You can set the option to false like this:

    lineChartOptions: ChartOptions  = {
        scales: {
          x: {
            grid: {
              display: false,
            },
          },
          y: {
            grid: {
              display: false,
            },
          },
        },
      };