1. Home
  2. Forum
  3. Blazor
  4. StackingColumn100 Chart Legend Colors Don't Match Fill colors

StackingColumn100 Chart Legend Colors Don't Match Fill colors

I'm setting the colors of a StackingColumn100 chart via the PointColorMapping property, and the colors of the legend aren't matching the fill colors (I'm using 19.3.0.44).


I found a similar issue from 2019 with the same issue, but no reports on this same issue in Blazor:
https://www.syncfusion.com/forums/148064/stacked-bar-chart-legend-doesnt-match-column-color 


<ChartSeriesCollection>
@foreach (var chartData in ChartDataList)
{
<ChartSeries DataSource="@chartData" XName="StatusName" YName="Count" ColumnSpacing="0.2" ColumnWidth="0.8" PointColorMapping="Color"
 Name="@(GetSeriesName(chartData))" LegendShape="LegendShape.Rectangle"
 Type="ChartSeriesType.StackingColumn100">
<ChartMarker>
<ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Middle">
<ChartDataLabelFont FontWeight="600" />
</ChartDataLabel>
</ChartMarker>
</ChartSeries>
}
</ChartSeriesCollection>
​

Screen Shot 2021-10-11 at 5.51.45 PM.jpg


3 Replies 1 reply marked as answer
SB Sridevi Bharathi Manohar Syncfusion Team October 12, 2021 01:00 PM UTC

Hi Patty, 

Greetings from Syncfusion. 

We have analyzed your query. From that, we would like to say that by default series fill color will be set as legend color. We suggest you to use LegendRenderEvent to customize legend fill color. Please check with the below snippet and sample. 

<SfChart> 
        <ChartEvents OnLegendItemRender="LegendEvent"></ChartEvents> 
</SfChart> 
@code{ 
    public void LegendEvent(LegendRenderEventArgs args) 
    { 
        if (args.Text == "UK") 
        { 
            args.Fill = "red"; 
        } 
        else if (args.Text == "Germany") 
        { 
            args.Fill = "blue"; 
        } 
    } 
} 

 



Kindly revert us if you have any concerns. 

Regards, 
Sridevi Bharathi. 


Marked as answer
PA Patty October 12, 2021 02:00 PM UTC

Thank your for this explanation.  The provided callback did work, but I opted to use the workaround below to set the fill color instead (seemed a little simpler).


Fill="@(chartData.Select(a => a.Color).FirstOrDefault())"

SB Sridevi Bharathi Manohar Syncfusion Team October 13, 2021 11:01 AM UTC

Hi Patty, 

Thanks for the update. 

We have analysed your query. From that, we would like to let you know that Fill property is used to set fill color for each series. In another hand PointColorMapping property is used to customize each point color in a series. You can choose any property according to your requirement wisely. Here we have create a sample using Fill property for your reference. Please check with the below snippet and sample. 

<SfChart> 
        <ChartSeriesCollection> 
            @foreach (SeriesData series in SeriesCollection) 
            { 
                <ChartSeries Fill="@series.Color" Type="ChartSeriesType.StackingColumn100"> 
                </ChartSeries> 
            } 
        </ChartSeriesCollection> 
</SfChart> 

 


Kindly revert us if you have any concerns. 

Regards, 
Sridevi Bharathi. 


Loader.
Up arrow icon