Changing colors of ngx-echarts charts


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>


colorScheme = {
    domain: [

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.


you can use the color property in the option

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

  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...


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

example link click..

hope it helpful..

Answered By – Nikhil Makwana

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published