Igx-chart brushes

Hi,

I am using pie-chart & category-chart. I have added brushes color to it. But at the initial load it is showing the default color & again if I reload it then it will apply the brushes color. Following is the code I am using:-

<igx-category-chart height="100%"
width="100%"
chartType="Column"
[dataSource]="lineDataSource"
valueMemberPath="pOcount"
labelMemberPath="pOnumber"
xAxisTitle="PurchaseOrder"
yAxisTitle="Count"
othersCategoryThreshold="0"
[brushes]="brushes"
[outlines]="outlinebrushes"
[tooltipTemplate]="valueTooltip">
</igx-category-chart>

brushes value is the following:-

this.brushes = [‘#FFD3A8 ‘, ‘#FFD8D8’];

Also, igx-theme is not included in our project. Is there any other way to change the default color? If yes, then please send me the solution.
If not, then how can I include igx-theme to my project? I am using angular9. Please let me know the solution, if you send an example or sample that might be helpful.

Thanks in Advance!

Hello Vai,

From the code you have provided, everything looks like it should be working in this case, as the brushes collection of both the IgxPieChart and IgxCategoryChart is how you would go about changing the colors of the different series. It is worth noting though, that from your code snippet above, it looks like you are trying to set valueMemberPath, labelMemberPath, and othersCategoryThreshold on the igx-category-chart, and these properties do not exist. They do however, exist on the igx-pie-chart.

I am attaching a sample project to demonstrate binding the brushes collection in the igx-category-chart and igx-pie-chart. I hope this helps you.

Please let me know if you have any other questions or concerns on this matter.

5481.Demo.zip

Hi Andrew,
I am doing it in the similar way. Just that I am assigning brushes color dynamically like –

public brushes: any =[]

var brushes = [‘#FFFBBD’, ‘#FFD3A8’, ‘#FFD8D8’];
brushes.filter((x, index) => {
if (count[index] != 0) {
this.brushes.push(x);
this.outlinebrushes.push(outlinebrushes[index])
}
})
It is based on some condition we are assigning the brushes color, it is not fixed.
Sometimes brushes can contain only one value or sometimes two values.

I am sending you the versions which I am using in my project, just for your reference to understand better :-

1. We have a infragistics licenced version

2. Following is the styles we are using in angular.json :-
"styles": [
“node_modules/bootstrap/dist/css/bootstrap.min.css”,
“node_modules/font-awesome/css/font-awesome.css”,
“node_modules/ngx-ui-switch/ui-switch.component.css”,
“node_modules/@infragistics/igniteui-angular/styles/igniteui-angular.css”,
“node_modules/@infragistics/ignite-ui-full/en/css/themes/infragistics/infragistics.theme.css”,
//”node_modules/@infragistics/ignite-ui-full/en/css/structure/infragistics.css”,
“src/styles.css”
]

3. Following is the versions we are using in package.json :-
"@angular/cli": "9.1.14",
"igniteui-angular-charts": "^9.1.2",
"igniteui-angular-core": "^9.1.2",
"igniteui-angular-wrappers": "^9.1.1"

Please let me know the solution.

Thank you in Advance!

Hello Vai,

From the code that you have provided, I see nothing wrong with the way that you are defining your “brushes” collection, but the different CSS files you are including do have me wondering if that would make a difference.

I also see that you are targeting version 9.1.2 of Ignite UI for Angular, and I would recommend that you upgrade these packages if possible to a newer version, as you are currently targeting a version that is over a year old, and since Ignite UI for Angular is a continuous product, it would not be a reliable test to see if a bug exists if testing against an older version as it will be an outdated code-base.

Looking at the references you have provided for the different CSS styles you are merging in Angular.json, I am curious to know whether or not this brushes issue happens if you do not use those? I am also rather unsure of what the ignite-ui-full package is or where that is coming from, as that does not appear to be present in more recent versions? Would it be possible for you to please test your application against a build where you do not merge these different CSS files and see if your brushes collection is respected then? The one that concerns me the most in this case is the ignite-ui-full….infragistics.theme.css file, as this may be using the default theme that may overwrite your brushes.

Please let me know if you have any other questions or concerns on this matter.

HI

even I have a similar issue.

we can't upgrade Infragistics version. we are using angular 9  and some third party libraries so we can't immediately upgrade the angular version.

And we checked the css,

we are not using infragistics.theme.css, and we were commented igniteui-angular.css.

After we comment this charts colors are showing properly, but grid styles are gone because we commented the  igniteui-angular.css.

Below is the styles array in  angular.json

"styles": [
“node_modules/bootstrap/dist/css/bootstrap.min.css”,
“node_modules/font-awesome/css/font-awesome.css”,
“node_modules/ngx-ui-switch/ui-switch.component.css”,
//”node_modules/@infragistics/igniteui-angular/styles/igniteui-angular.css”,

“src/styles.css”
],

So the chart issue is in default css( igniteui-angular.css.) only.

Can you please check again and let me know If there is any solution. (or) please raise a ticket.

Let me know If you nee any other information.

Thanks

 

Hello Suresh & Vai,

Thank you for your update on this matter.

I am able to reproduce the behavior you are seeing, and it appears to be due to the line in the igniteui-angular.css file that is setting the –data-chart-brushes property. I would recommend removing this line from the igniteui-angular.css file for the time being to prevent your brushes collection from being overwritten. Alternatively, you can replace the brushes that you are looking to use with your collection of brushes.

This behavior is unexpected, but is known, as the igniteui-angular.css file is used with our theming for Ignite UI for Angular, and it should not be overwriting the brushes collection. I am creating a private support case so that I can link you both to the internally logged development issue, which has an ID of 272991. I have created a pair of support cases as well, CAS-212446-T4K5R9 for Vai and CAS-212464-L7S4T2 for Suresh. You can access them after signing into your respective accounts at the following website: https://www.infragistics.com/my-account/support-activity.

Please let me know if you have any other questions or concerns on this matter.

Hi,

I tried removing –data-chart-brushes from igniteui-angular.css file, but still I am getting a default colors. 

Please let me know if I can try something else.

Thanks!

Hello Vai,

My apologies, in the case of the sample project you have provided, you also need to remove the following flags from the igniteui-angular.css file as well:

— category-chart-brushes
— pie-chart-brushes

This will let the igx-category-chart and the igx-pie-chart use the brushes you have defined. I would also recommend that you copy the igniteui-angular.css file that you are referencing from the node_modules folder and store it locally so that you can reference that in your angular.json. The reason for this is because if you do not, then every time you call npm install, the css file will be regenerated with the flags mentioned above that you do not want.

Please let me know if you have any other questions or concerns on this matter.

Hi Andrew,

Thank you so much, it is working.

Hi Andrew,

We are using licensed version of infragistics. If I implement that in your sample project then we are able to reproduce the issue. I have removed node_modules because of size of folder.

I am sending you the attachment of the sample project, in which we were able to replicate the issue which we are causing. Please check it & let me know if there is any solution.

Thanks in Advance!

0181.Demo.zip