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" };
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
