Chart.js：如何手动设置行高

Question

是否可以使行有点窄，我做了很多研究，但找不到与此相关的任何东西。请看截图，

这也是我正在使用的代码

条形图选项

  stackedChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }],
    }
  };
  stackedChartColors: any[] = [{ backgroundColor: ['#adcde1', '#3a77af'] }];

  stackedChartLabels: string[] = [];
  stackedChartData: ChartDataSets[] = [];

模板

   <canvas
      baseChart
      [chartType]="'horizontalBar'"
      [datasets]="stackedChartData"
      [colors]="stackedChartColors"
      [options]="stackedChartOptions"
      [labels]="stackedChartLabels"
  </canvas>

这里也是复制示例。 https://stackblitz.com/edit/ng2-charts-bar-template-si9pkc?file=src%2Fapp%2Fapp.component.html

所以我的问题是：

是否可以手动设置行高？任何帮助将不胜感激

更新：在示例中，行很窄，但不受我控制

Answer 1

我假设您使用的是 chart.js v2。

您可以使用barThickness调整条的大小：

https://www.chartjs.org/docs/2.9.4/charts/bar.html#barthickness

stackedChartData: ChartDataSets[] = [
    {
      label: 'Dataset 1',
      backgroundColor: '#adcde1',
      data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
      barThickness: 10 // adjust bar size
    },
    {
      label: 'Dataset 2',
      backgroundColor: '#3a77af',
      data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100].reverse(),
      barThickness: 10 // adjust bar size
    }
  ];

演示代码框：

https://stackblitz.com/edit/ng2-charts-bar-template-2eizu5?file=src%2Fapp%2Fapp.component.ts