Change default colors set on Angular ngx-charts

DevMachine picture DevMachine · Aug 15, 2018 · Viewed 8.4k times · Source

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: enter image description here

Do you guys know how to change the color palette on the ngx-charts?

Any help is much appreciated, thank you!

Answer

DevMachine picture DevMachine · Aug 15, 2018

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!