Как создать градиент 'backgroundColor' в Angular Chart.js

Question

Я пытаюсь реализовать chart.js в Angular, используя ng2-chart. Мне нужно backgroundColor как градиент в линейной диаграмме.

Есть ли способ получить диаграмму в градиенте.

public lineChartColors: Color[] = [
    {
     borderColor: '#813d7e',
     backgroundColor: 'rgba(129, 61, 126, 0.25)',
     borderWidth: 2,
     pointBackgroundColor:'#fff',

    },
  ];

Вы можете посетить для живого кода на Stackbiltz

Answer 1

Вы можете управлять холстом по ViewChild

@ViewChild('myCanvas') canvas: ElementRef;

<canvas #myCanvas  baseChart ...

и установите цвет таким образом

 const gradient = this.canvas.nativeElement.getContext('2d').createLinearGradient(0, 0, 0, 600);
      gradient.addColorStop(0, 'red');
      gradient.addColorStop(1, 'green');
      this.lineChartColors = [
          {
              backgroundColor: gradient
          }
 ];

Пожалуйста, изучите https://stackblitz.com/edit/ng2-charts-line-template-rqccsu

Answer 2

Пожалуйста, проверьте ниже ссылку, это решит вашу проблему создайте линейную диаграмму с градиентными цветами и анимацией.