We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

SfChart Bar chart Palette property not applying colors.

I'm having an issue where the Palettes property in the SfChart component I'm using in part of my application is not applying properly. All I get is the default fill color as shown below. I have changed the background, title, and axis label colors successfully.



Example of the code being used:

<SfChart Background="var(--main-background-color)" Title="@Input.Title" Palettes="@ColorPalette">
    <ChartTitleStyle Color="var(--main-color)" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisLabelStyle Color="var(--main-color)" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartAxisLabelStyle Color="var(--main-color)" />
    </ChartPrimaryYAxis>


    <ChartSeriesCollection>
        <ChartSeries DataSource="@Input.Data" XName="@Input.XName" YName="@Input.YName" Type="ChartSeriesType.Column" ColumnSpacing="0.2" ColumnWidth="0.2">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>
private static String[] ColorPalette = new string[] { "rgb(43, 112, 184)", "rgb(128, 188, 0)", "rgb(70, 194, 203)", "#C12138", "#EB7726", "#E8C41E" };

2 Replies

KW Kyle White November 15, 2022 12:06 PM

Bump - has anyone had experience with this before?


Thanks!



SB Swetha Babu Syncfusion Team November 17, 2022 05:52 AM

Hi Kyle,


Greetings from Syncfusion.


We can set different colors for the bars by using two methods one is PointColorMapping property in series of the chart and other is setting Fill argument in OnPointRender event of the chart. Palette property is used for multiple series. We can set the color in the dataSource and set the corresponding property name in the PointColorMapping property. We have created a simple blazor application to demonstrate the same and it can be downloaded from the below link.


Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ColumnChart756040960


Code Snippet:


Method 1: PointColorMapping property in Series.


<ChartSeries PointColorMapping="Color" DataSource="@MedalDetails" XName="X" YName="YValue" Type="ChartSeriesType.Column" ColumnSpacing="0.2" ColumnWidth="0.2">

        </ChartSeries>

 

public List<ChartData> MedalDetails = new List<ChartData>

       {

        new ChartData { X= "USA", YValue= 46, Color = "rgb(43, 112, 184)" },

        new ChartData { X= "GBR", YValue= 27, Color = "rgb(128, 188, 0)" },

        new ChartData { X= "CHN", YValue= 26, Color = "rgb(70, 194, 203)" },

        new ChartData { X= "UK", YValue= 23, Color = "#C12138" },

        new ChartData { X= "AUS", YValue= 16, Color = "#EB7726" },

        new ChartData { X= "IND", YValue= 36, Color = "#E8C41E" }

    };


Method 2: OnPointRender event of the chart


<SfChart>

    <ChartEvents OnPointRender="PointColor"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">

        <ChartAxisLabelStyle />

    </ChartPrimaryXAxis>

    <ChartPrimaryYAxis>

        <ChartAxisLabelStyle />

    </ChartPrimaryYAxis>

    <ChartSeriesCollection>

        <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" Type="ChartSeriesType.Column" ColumnSpacing="0.2" ColumnWidth="0.2">

        </ChartSeries>

    </ChartSeriesCollection>

</SfChart>

 

private static String[] ColorPalette = new string[] { "rgb(43, 112, 184)", "rgb(128, 188, 0)", "rgb(70, 194, 203)", "#C12138", "#EB7726", "#E8C41E" };

void PointColor(PointRenderEventArgs args)

    {

        args.Fill = ColorPalette[args.Point.Index % 10];

    }



Screenshot:



Kindly, revert us if you have any concerns.


Regards,

Swetha


Loader.
Live Chat Icon For mobile
Up arrow icon