如何在Angular 16的ng2-charts中移除折线图的网格线与坐标轴？

ng2-charts基于Chart.js封装，网格线的控制逻辑沿用Chart.js的配置体系，你只需要在lineChartOptions中添加scales配置项，即可关闭X轴和Y轴的网格线显示：

修改你的lineChartOptions配置如下：

lineChartOptions: ChartOptions = {
  responsive: true,     
  elements: {
    point: {
      radius: 0,
    },
    line: {
      borderWidth: 1
    }
  },
  // 新增网格线控制配置
  scales: {
    x: {
      grid: {
        display: false // 隐藏X轴网格线
      }
    },
    y: {
      grid: {
        display: false // 隐藏Y轴网格线
      }
    }
  }   
};

补充说明 #

• 若只需隐藏单个轴的网格线，保留对应轴的配置即可（比如仅隐藏Y轴，就只保留y.grid.display: false）
• 注意你模板中的<canvas>标签未闭合，需补充></canvas>避免渲染报错：

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

内容的提问来源于stack exchange，提问作者New_Angular Developer