Geek Answers Handbook

How to change color for ng2 diagrams?

I added ng2 diagrams to my project and display 2 diagrams - a donut and a barkar. both are grayed out as I added

<base-chart class="chart" [colors]="chartColors" ... </base-chart>

in component.template.html and

 public chartColors:Array<any> =[ { fillColor:'rgba(225,10,24,0.2)', strokeColor:'rgba(11,255,20,1)', pointColor:'rgba(111,200,200,1)', pointStrokeColor:'#fff', pointHighlightFill:'#fff', pointHighlightStroke:'rgba(200,100,10,0.8)' }, ... (3x)

in component.ts

- any other import packages needed to change the color or the wrong setting? Chromes html inspector displays the following html output

 ng-reflect-colors="[object Object],[object Object],[object Object]"
+17
angular ng2-charts
source share
3 answers

You should do it like this:

  public chartColors: Array<any> = [ { // first color backgroundColor: 'rgba(225,10,24,0.2)', borderColor: 'rgba(225,10,24,0.2)', pointBackgroundColor: 'rgba(225,10,24,0.2)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(225,10,24,0.2)' }, { // second color backgroundColor: 'rgba(225,10,24,0.2)', borderColor: 'rgba(225,10,24,0.2)', pointBackgroundColor: 'rgba(225,10,24,0.2)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(225,10,24,0.2)' }];

Gray is set by default, which means that your color options are not working due to incorrect property names.

Here's an example of what color properties are called:

NG2 Charts-GitHub Source Code

@UPDATE:

If you need to update only backgroundColor and nothing else, the code below will also work.

 public chartColors: Array<any> = [ { // all colors in order backgroundColor: ['#d13537', '#b0o0b5', '#coffee', ...] } ]
+31
source share

You can also do this as follows:

 <base-chart class="chart" [colors]="chartColors" ... </base-chart>

and

 public chartColors: any[] = [ { backgroundColor:["#FF7360", "#6FC8CE", "#FAFFF2", "#FFFCC4", "#B9E8E0"] }];
+41
source share
 //.ts_file public chartColors() { return [{ backgroundColor: this.alert.severityColor, borderColor: 'rgba(225,10,24,0.2)', pointBackgroundColor: 'rgba(225,10,24,0.2)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(225,10,24,0.2)' }] } //.html_file <div style="display: block"> <canvas baseChart [datasets]="barChartData()" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" [colors]="chartColors()" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas> </div>

I needed to dynamically change the color of the charts based on the values ​​and colors attached to the alerts. I found that @uluo had a great answer. I changed it from a class property to a function and returned an object with the colors set for dynamic elements in my warnings. Then I used the function to link the colors of my chart, and it was magical. I am stuck on this issue for hours!

Hope this helps anyone who is trying to pass dynamic values ​​to ng2 diagrams with Angular!

+3
source share

More articles:


All Articles