I'm working on an angular app and using ngx-charts, after debugging and searching online for few moments I couldn't find how to change the color palette on the charts.
The default angular color palette looks like the following:
Do you guys know how to change the color palette on the ngx-charts?
Any help is much appreciated, thank you!
After debugging for a while I found the solution:
So here are the steps:
Step 1 : On my .ts file I added a variable with the colors I needed
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};
Step 2: on the .html file I called that variable inside the [scheme]="colorScheme" Property
<ngx-charts-pie-chart
[results]="chartData.pieChartData.chartPoints"
[legend]="chartData.chartOptions.showLegend"
[explodeSlices]="chartData.chartOptions.explodeSlices"
[labels]="true"
**[scheme]="colorScheme"**
[tooltipDisabled]="!chartData.chartOptions.showToolTip"
[doughnut]="chartData.chartOptions.donut"
aria-hidden="true">
</ngx-charts-pie-chart>
Good luck!
Use colorScheme variable can custom your chart color. You can find description in doc.
https://swimlane.gitbook.io/ngx-charts/examples/pie-charts/pie-chart
custom colors for the chart. Used to override a color for a specific value
src/app.ts
//our root app component
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser-animations';
import {NgxChartsModule} from '@swimlane/ngx-charts';
import {single, multi} from '../data.ts';
@Component({
selector: 'my-app',
template: `
<ngx-charts-pie-chart
[view]="view"
[scheme]="colorScheme"
[results]="single"
[legend]="showLegend"
[explodeSlices]="explodeSlices"
[labels]="showLabels"
[doughnut]="doughnut"
[gradient]="gradient"
(select)="onSelect($event)">
</ngx-charts-pie-chart>
`
})
export class App {
single: any[];
// chart area size
view: any[] = [700, 400];
// options
showLegend = false;
showLabels = true;
explodeSlices = false;
doughnut = false;
// your color scheme
colorScheme = {
domain: [
'#FF8A80',
'#EA80FC',
'#8C9EFF',
'#80D8FF',
'#A7FFEB',
'#CCFF90',
'#FFFF8D',
'#FF9E80'
]
};
constructor() {
Object.assign(this, {single})
}
// select event
onSelect(event) {
console.log(event);
}
}
@NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, NgxChartsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
data.ts
export var single = [
{
"name": "Apple",
"value": 8940000
},
{
"name": "Banana",
"value": 5000000
},
{
"name": "Ornage",
"value": 7200000
},
{
"name": "Avocado",
"value": 4830200
},
{
"name": "Cherry",
"value": 5520000
},
{
"name": "Coconut",
"value": 1200000
},
{
"name": "Guava",
"value": 2230000
},
{
"name": "Lemon",
"value": 4323000
}
];
For newer version above 19 . They changed their structure . You can give name of color scheme fromhere and example usage will be
<ngx-charts-pie-chart
[view]="view"
[scheme]="'forest'"
[results]="single"
[legend]="showLegend"
[explodeSlices]="explodeSlices"
[labels]="showLabels"
[doughnut]="doughnut"
[gradient]="gradient"
(select)="onSelect($event)">
</ngx-charts-pie-chart>
but if you want to use custom colors then u need to use [customColors]
attribute and its format is like
{ name: "", value: '#33cc33' }
here you need to be sure that name of color and name of data object need to be same. For example your data is like [{name="Turkey",value:100}]
then your color object need to be [{name="Turkey",value: '#33cc33'}]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.