Changing colors of ngx-echarts charts

Question

How to change the colors of all kind of charts in ngx-echarts?

Ive tried (html): <div echarts [options]="chartOption" [theme]="colorScheme" class="demo-chart"></div>

(ts):

colorScheme = {
    domain: [
      '#2FDF75',
      '#246EB9',
      '#BCD3F2',
      '#323031',
      '#FBFFF1',
      '#CCFF90',
      '#FFFF8D',
      '#FF9E80'
    ]
  };

The colors do not change. I am afraid that the format of my custom theme is not the right one. I couldnt find any documentation on how to change the colors of the charts in an easy way.

score 1 · Accepted Answer · answered Jun 05 '23 at 13:47

you can use the color property in the option

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {

  chartOption: any;

  constructor() {
    this.chartOption = {
      color: ['#2FDF75', '#246EB9', '#BCD3F2', '#323031', '#FBFFF1', '#CCFF90', '#FFFF8D', '#FF9E80'],
      // your other chart options...
    };
  }
}

HTML

<div echarts [options]="chartOption" class="demo-chart"></div>

example link click..

hope it helpful..

Thank you! That worked! Much easier than I expected. – Che Jun 06 '23 at 09:40 — Che, Jun 06 '23 at 09:40

Changing colors of ngx-echarts charts

1 Answers1