Changing chart colours of each bar in the same series

[Chong Wong]

Hi Syncfusion,

Is it possible to change the colour of each bar in the same single series?

Eg: take your example:
http://websamples.syncfusion.com/samples/Chart.Windows/F59033/main.htm

Each bar is the same colour. I would like to make each bar a different colour if possible? How to do it if possible?

Thanks in advance!

Chong

[Ramya R]

Hi Chong,

Thanks for your interest in Syncfusion Products.

You can set specific color to each bar by using the PrepareStyle event of the Chart series or by using the Styles[seriesindex].Interior property as shown in the code snippets below,


1. private void Series1_PrepareStyle(object sender, ChartPrepareStyleInfoEventArgs args)
{
ChartSeries series=sender as ChartSeries;
if(series!=null)
{
if (args.Index == 0)
args.Style.Interior = new BrushInfo(Color.Green);
else if (args.Index == 1)
args.Style.Interior = new BrushInfo(Color.Bisque);
else if (args.Index == 2)
args.Style.Interior = new BrushInfo(Color.Cyan);
else if (args.Index == 3)
args.Style.Interior = new BrushInfo(Color.Blue);
else if (args.Index == 4)
args.Style.Interior = new BrushInfo(Color.Red);

}

}

2. series.Styles[0].Interior= new BrushInfo(Color.Red);
series.Styles[1].Interior= new BrushInfo(Color.Green);
series.Styles[2].Interior= new BrushInfo(Color.Blue);
series.Styles[3].Interior= new BrushInfo(Color.Violet);
series.Styles[4].Interior= new BrushInfo(Color.BurlyWood);

or if your intention is to have different colors for the series each item when the sample is executed it can be done as shown in the code snippet below,

Random r=new Random();
for(int i=0;iseries.Styles[i].Interior= new BrushInfo(Color.FromArgb(r.Next(0,255),r.Next(0,255),r.Next(0,255)));

Let me know whether this helps you.

Thanks & Regards,
Ramya.

[Chong Wong]

Hi Ramya,

Thank your for the code snippets, it works perfectly!

Thanks for your help again!

Regards,
Chong

[Kumaresan]

possible in angular?

[Nishanthi Panner Selvam]

Hi Chong,

Using pointColorMapping we can change the color of each individual point in a series.

We have attached an example to illustrate this.

Code-snippet:

public data: Object[] = [

        { Country : "GBR", GoldMedal : 27,color: 'red' },

    ];

<ejs-chart>

            <e-series-collection>

                <e-series pointColorMapping='color' > </e-series>

            </e-series-collection>

</ejs-chart>

Screenshot:

Sample: https://stackblitz.com/edit/angular-aaaf1j?file=src%2Fapp.component.ts,src%2Fapp.component.html

Kindly revert us if you have any concerns.

Regards,

Nishanthi