angularionic-frameworkcolorsngx-echarts

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>

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


Solution

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