Adding multiple dataset and colors not being assigned in ng2-charts

Question

I am making an app in which I can set options on a page and have those options gather a collection of datasets so they can be visualized in a line chart.

The data is gathered from a server using this method:

this.checkedList.forEach(item => {
  var inn = {
    action: item.action,
    moneda: item.moneda
  }

  this.http.post(URL, Object.assign(this.options, inn)).subscribe(data => {
    Object.keys(data).forEach(function(key) {
      if (data[key]["val"] == null) {
        data[key]["val"] = 0;
      } else {
        dataC.push(data[key]["val"])
      }
    })
    var val: Object = {
      data: dataC,
      label: 'Pesos'
    }
    newData.push(val)
    dataC = []
  })
})

this.ChartData = newData
console.log(this.ChartData)

In this.ChartData is the array for the data to go on the chart. The datasets are correctly implemented as the chart does display the data, however the colors for all the graphs are gray like this:

If my Colors array for ng2-charts is like this:

ChartColors: Array<any> = [{
  backgroundColor: 'rgba(0, 102, 235, 0.3)',
  borderColor: '#1862c6',
  pointBackgroundColor: 'rgba(0, 102, 235, 1)',
  pointBorderColor: '#1862c6',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(0, 102, 235, 0.4)'
}, {
  backgroundColor: 'rgba(235, 78, 54, 0.2)',
  borderColor: '#ff5723',
  pointBackgroundColor: 'rgba(235, 78, 54, 1)',
  pointBorderColor: '#ff5723',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(235, 78, 54, 0.8)'
}, {
  backgroundColor: 'rgba(67, 210, 158, 0.2)',
  borderColor: '#00caac',
  pointBackgroundColor: 'rgba(67, 210, 158, 1)',
  pointBorderColor: '#00caac',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(67, 210, 158, 0.8)'
}]

The HTML for the chart is the following:

<div class="chk-block-content widget-body todo-widget">
  <canvas height="100" baseChart [datasets]="ChartData" [labels]="ChartLabels" [options]="ChartOptions" [colors]="ChartColors" [legend]="ChartLegend" [chartType]="ChartType"></canvas>
</div>

What is the reason the colors are not being set to the chart? Am i missing entries for the colors array? The way I'm setting the datasets is wrong?

I would appreciate your help

uminder uminder · Accepted Answer · 2020-04-04T06:31:49

You should change the way of defining ChartColors. The array should contain a single object and each of its properties should be defined as an array of values.

ChartColors = [{
  backgroundColor: ['rgba(0, 102, 235, 0.3)', 'rgba(235, 78, 54, 0.2)', 'rgba(67, 210, 158, 0.2)'],
  borderColor: ['#1862c6', '#ff5723', '#00caac'],
  pointBackgroundColor: ['rgba(0, 102, 235, 1)', 'rgba(235, 78, 54, 1)', 'rgba(67, 210, 158, 1)'],
  pointBorderColor: ['#1862c6', '#ff5723', '#00caac'],
  pointHoverBackgroundColor: ['#fff', '#fff', '#fff'],
  pointHoverBorderColor: ['rgba(0, 102, 235, 0.4)', 'rgba(235, 78, 54, 0.8)', 'rgba(67, 210, 158, 0.8)']
}]

Adding multiple dataset and colors not being assigned in ng2-charts

1 Answers