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

[Saurabh Jindal]

Hi Ramya,

we can style graphs using theme property , is it possible to fetch colors from the same theme and set different colors in bars

Thanks

[Nishanthi Panner Selvam]

Hi Saurabh,

We can set different colors for the bars based on the selected theme. We have attached our sample browser demonstrating this functionality. As you can see, the fill color of the bars changes according to the theme selection using the pointRender event.

Code-snippet:

public pointRender(args: IPointRenderEventArgs): void {

    let pointMaterialColors: string[] = [

      '#00bdae',

      '#404041',

      '#357cd2',

      '#e56590',

      '#f8b883',

      '#70ad47',

      '#dd8abd',

      '#7f84e8',

      '#7bb4eb',

      '#ea7a57',

      '#404041',

      '#00bdae',

    ];

    let selectedTheme: string = 'bootstrap5';

    selectedTheme = selectedTheme ? selectedTheme : 'Fluent2';

    if (selectedTheme === 'material-dark') {

      args.border.color = pointMaterialDarkColors[args.point.index % 10];

    }

}

Screenshot:

Sample browser: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/chart/category

Kindly revert us if you have any concerns.

Regards,

Nishanthi