Line Charts color all greyed out (ng2-charts)

1
votes

I'm trying to put colors in my 2 line charts (on a same chart), but the colors remain grey, no matter what option I put. I'm getting data in these charts dynamically.

HTML:

<div class="lineChart4">
    <h4 class="heading" style="text-align:center">Line Chart For Number of Clicks
    </h4>

    <div style="display: block" >
        <canvas baseChart
                [datasets]="lineChartData4"
                [labels]="lineChartLabels4"
                [colors]="lineChartColors"
                [chartType]="lineChartType4"
                [legend]="lineChartLegend4"
                [options]="lineChartOptions4">
                <!-- (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)" -->
        </canvas>
    </div>


</div>

.ts:

public lineChartLabels4=['','','','',''];

  public lineChartData4=[{ data: [0,0,0,0,0], label: '' , lineTension:0, fill: false},
                         { data: [0,0,0,0,0], label: '' ,lineTension:0, fill: false}];

  public lineChartType4:string='line';
  public lineChartLegend4 = true;
  public lineChartColors: Color[] = [
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // red
      backgroundColor: 'rgba(255,0,0,0.3)',
      borderColor: 'red',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }

  ];

The data coming (the shapes of the charts) is correct, but I'm getting no colors. Can someone help me out here. TIA.

1
angularchart.jsng2-charts

1 Answers

1
votes

Your code is working for me.

Here is a working Stackblitz.

I think you should look at the installation here to get a solution.