Как изменить цвет фона в ng2-чартах

Question

Я использую ng2-диаграммы для построения гистограммы с накоплением. Но я не могу изменить цвет фона по умолчанию для гистограммы.

Stackblitz link

Попытка добавить свойство цвета фона в набор данных диаграммы, но оно не работает.

Последнее обновление: рабочая демоверсия: stackblitz

Answer 1

На мой взгляд, есть возможность сделать это с помощью свойства colors. Просто передайте массив объектов цветов ( см. Здесь, чтобы увидеть объект )

вот рабочий пример

Добавьте ввод в HTML следующим образом:

<div style="display: block;">
   <canvas baseChart 
      [datasets]="barChartData"
      [labels]="barChartLabels"
      [options]="barChartOptions"
      [plugins]="barChartPlugins"
      [legend]="barChartLegend"
      [chartType]="barChartType"
      [colors]="colors">//<---------------the colors input property
   </canvas>
</div>

Затем просто добавьте в свой файл ts следующий объект:

  public colors = [
    { backgroundColor:"red" },
    { backgroundColor:"green" },
    { backgroundColor:"blue" },
    { backgroundColor:"yellow" }
  ];