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';
You can set the option to false like this:
lineChartOptions: ChartOptions = {
scales: {
x: {
grid: {
display: false,
},
},
y: {
grid: {
display: false,
},
},
},
};