Change default colors set on Angular ngx-charts

Question

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!

Answer 1

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!

Answer 2

For newer version above 19 . They changed their structure . You can give name of color scheme from here 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'}]

Answer 3

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

example pie chart

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
  }
];

Answer 4

In addition to mr pc coder's answer.

Just to clarify, In your template make sure to use customColors like so:

 <ngx-charts-bar-vertical 
  [customColors]="barChartcustomColors"
  [view]="view"
  [results]="barChartData"
  [legend]="true"
  [legendPosition]="below"
  [showGridLines]="showGridLines"
  [showXAxisLabel]="true"
  [showYAxisLabel]="true"
  [xAxis]="true"
  [yAxis]="true">
</ngx-charts-bar-vertical>

In your component, make sure to declare the custom colours like so:

  barChartcustomColors = 
  [
    { name: "2019", value: '#febb00' },
    { name: "2020", value: '#1dd068' },
    { name: "2021", value: '#1dd068' },
    { name: "2022", value: '#febb00' },
  ]

  barChartData = [
    { name: "2019", value: 30 },
    { name: "2020", value: 60 },
    { name: "2021", value: 96 },
    { name: "2022", value: 151 },
  ];

Note that I used the variable barChartcustomColors which has been used in the HTML template as well as the TS component.

So just make sure your data name keys match the colour name keys word for word, as any typo would not make it render.