Hi Guys,
I am new to Igniute UI chart for angular i was wondering how i can Assign certain colors to a category in a Pie chart
Example : var ChartData = [{Label: 'slice 1', Value: 10}, {Label: 'slice 2', Value: 10}, {Label: 'slice 3', Value: 10}]
I would like to permanently assign, example RED to SLICE 1 and BLUE to SLICE 2 and GREEN to Slice 3. A example would be appreciated and maybe even a insight on how this would work on all the charts in general
Hello,
Here you can find detailed example with the pie chart - https://www.infragistics.com/products/ignite-ui-angular/angular/components/piechart.html
Hey, Perhaps I wasn't clear with my question. This is an example of a simple Pie Chart.
<igx-pie-chart #piechart [dataSource]="PieData" valueMemberPath="Value" labelMemberPath="Label" brushes="red, green, blue" outlines="red, green, blue"> </igx-pie-chart>
PieData = [
{ 'Label': 'Slice 1', 'Value': 10},
{ 'Label': 'Slice 2', 'Value': 20},
{ 'Label': 'Slice 3', 'Value': 30}
];
This draws a perfectly good pie chart and the colors are assigned red, green, blue for Slice1, Slice2, Slice3 respectively.
Now if the PieData changes to
{ 'Label': 'Slice 1', 'Value': 0},
{ 'Label': 'Slice 2', 'Value': 0},
Then the color scheme will be changed and Slice1 - not assigned, Slice2- not assigned, Slice3 - red, which is incorrect. (Slice3 should be blue)
What i need is
Slice1 - red, Slice2 - green, Slice3 - blue no matter the values.
Thank you for explaining this in detail!
And actually this how the pie chart works by design. When the values are 0 these slice are not rendered.
For your scenario you have only one slice to render and first slice gets the first brush color - which is red.
Brushes are settable so you can modify them to match you data.
Here's a stackblitz sample to demonstrate what I mean.
Is there any property to reduce the ring size/thickness ?
The size of IgxPieChart id determined by the lower of its width and height. If you need to scale the chart you can set its radiusFactor input to a value between 0 and 1.