Ngx-charts: setup customColors

[molot1989]

Hi, thanks for library, can you explain how use "customColors" ?

[marjan-georgiev]

This was fixed in 4.2.1.

To use customColors, you need to define an array of {name, value} pairs, where name is the name of the item which color you want to change, and the value is the color.

Example, to change the color of 'France' to blue:

customColors = [
    { 
      name: 'france',
      value: '#0000ff'
    }
];

Here is a plunkr example which overrides the color for the value 'France'

https://plnkr.co/edit/eoP4ywMWBDWrN7OX1fKO?p=preview

[molot1989]

Thanks for example

[molot1989]

It's not working for me, with multi data in "Grouped Vertical Bar Chart"
See plunkrer
https://plnkr.co/edit/jAGau7LTa2S3ZevNt5Ed?p=preview

[marjan-georgiev]

You are passing it a wrong format.

Here's a fixed plunkr:
https://plnkr.co/edit/vjhbLiGYcnr7UcAbpGWT?p=preview

[molot1989]

Thanks for quick answer, but I want change color only for one country and one year. How it make?

[marjan-georgiev]

You can not do that. In your case, the countries are the groups, and the bars represent the years. You can only change the colors of the years.

[molot1989]

I understood, thanks for the reply

[chcald]

I am the same problem

[chcald]

I need to change only one.

[ssipaulya]

@marjan-georgiev Above plunker is not working for me.Getting System JS error while spinning it out.
I tried the way you have told in local copy for Heat map charts, but it is not working for me.

[frankdavidcorona]

@marjan-georgiev @molot1989 https://stackoverflow.com/questions/51748555/custom-color-for-specific-serie-using-ngx-charts I need help with this.

[georgeedwards]

@marjan-georgiev Thanks for this, and how about the format for passing in a function?

The docs say this property will accept a function or object. Are there any examples of this?

[yuvalbl]

Please include this explanation in the docs
Great library by the way :)

[snowPu]

Does customColors not work on ngx-charts-bubble-chart? The following doesn't work.

 <ngx-charts-bubble-chart *ngIf="data && data.length > 0" [scheme]="colorScheme" [customColors]="customColors" [results]="data" [xAxis]="true"
      [yAxis]="true" [legend]="true" [showXAxisLabel]="true" [showYAxisLabel]="true"
      xAxisLabel="Year, Quarter" yAxisLabel="No idea">
    </ngx-charts-bubble-chart>

customColors = [
{name: 'ABC', value: '#f58c14'},
{name: 'XYZ', value: '#becdd7'}
];

data = [
{name: "Funnel Report",
series: [
    {name: 'ABC', x: 1, y: 2, r: 23},
    {name: 'XYZ', x: 3, y: 4, r: 13}
]}
];

[NareshKumarM]

Does the library have a functionality for bar graphs where if value is negative, we can set a color of choice and vice versa?

[slwzero]

It's not working for me, with multi data in "Grouped Vertical Bar Chart"
See plunkrer
https://plnkr.co/edit/jAGau7LTa2S3ZevNt5Ed?p=preview

Did you solve this of multi? I was searching this solution too.

[DavidStreid]

@snowPu it looks like customColors is determined by the object name in data. In your case, "Funnel Report"

[karocksjoelee]

Any one facing that if I change the custom color array dynamically will cause that the animation of the chart render extremely slow ?

[ki2itoPro]

Any one facing that if I change the custom color array dynamically will cause that the animation of the chart render extremely slow ?

Same issue for me, chart is extremely slow when I change color dynamically

[NareshKumarM]

@ki2itoPro @karocksjoelee If you guys can put in a stackblitz to reproduce the issue, I can have a look at it to suggest possible fixes as I had performed the same on a larger dataset.

[btxtiger]

customColors = [
    { 
      name: 'france',
      value: '#0000ff'
    }
];

seems not to work anymore for line charts

[btxtiger]

It turned out, it is now required to pass a function:

   public getNamedColor = (statName: string) => {
      switch (statName) {
         case 'Rate of change':
            return '#31badb';
         case 'Trend':
            return '#D33F93';
         case 'Average':
            return '#9fa1a9';
         case 'Total':
            return '#CECB62';
         default:
            return '#1f3165';
      }
   };

[Adamicov]

thx @btxtiger

[umbe1987]

@btxtiger

It turned out, it is now required to pass a function:

Actually it can accept both an object or a function (as per the docs).

I had a similar problem and I have a working solution showing how to change the color of a bar upon selecting it using customColors poperty with and object.

Link to example: https://stackblitz.com/edit/vertical-bar-chart-atxxvq

Hope it helps ;)

[weirdyang]

I can't seem to get this to work for the gauge chart.