From a0c1e6b8e5d4e32ba6365764898c5553c7f9ebab Mon Sep 17 00:00:00 2001
From: KB Bot <kb-bot@telerik.com>
Date: Wed, 16 Apr 2025 14:52:11 +0000
Subject: [PATCH 1/6] Added new kb article
chart-legend-colors-not-matching-stacked-bar-chart
---
...d-colors-not-matching-stacked-bar-chart.md | 97 +++++++++++++++++++
1 file changed, 97 insertions(+)
create mode 100644 knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
diff --git a/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md b/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
new file mode 100644
index 0000000000..e8f35478ea
--- /dev/null
+++ b/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
@@ -0,0 +1,97 @@
+---
+title: Legend Colors Do Not Match Data Points in Stacked Bar Chart
+description: Explains why the legend colors might not match the data points in a stacked bar chart and provides a solution.
+type: troubleshooting
+page_title: Ensure Legend Colors Match Data Points in Stacked Bar Charts
+slug: chart-kb-legend-colors-not-matching-stacked-bar-chart
+tags: charts, bar chart, stacked series, legend, color
+res_type: kb
+ticketid: 1684367
+---
+
+## Environment
+
+<table>
+ <tbody>
+ <tr>
+ <td>Product</td>
+ <td>Charts for Blazor</td>
+ </tr>
+ </tbody>
+</table>
+
+## Description
+
+When creating a Chart with Stacked Series, the colors of the data points render correctly on the Chart itself, but the legend colors do not match the colors of the data points. This discrepancy occurs when using the `ColorField` parameter.
+
+## Cause
+
+This behavior is by design. Using the `ColorField` parameter to assign a unique color to each data point within a single series is supported in **non-stacked** Charts, but not in stacked Charts.
+
+Stacked Charts are designed to visualize the cumulative value of multiple series stacked atop one another. Applying individual colors to each data point in this context would compromise the visual clarity of the stack relationships and make it difficult for the legend to accurately reflect the data.
+
+## Solution
+
+To ensure that the legend colors match the data points in a stacked Chart, use the `Color` parameter of the `ChartSeries`. This parameter sets a uniform color for all data points (bars) within a single series and determines the color shown in the legend for that series.
+
+Here is an example configuration that applies a specific color to each series in a stacked bar chart:
+
+`````Razor
+<TelerikChart Width="100%" Height="100%">
+ <ChartSeriesItems>
+ @foreach (var series in _graphDataPoints)
+ {
+ <ChartSeries Field="@nameof(GraphDataPoint.Value)"
+ Type="ChartSeriesType.Bar"
+ Name="@series.Label"
+ Color="@series.Color"
+ Data="@([series])">
+ <ChartSeriesStack Enabled="true" />
+ </ChartSeries>
+ }
+ </ChartSeriesItems>
+ <ChartLegend Position="ChartLegendPosition.Right" />
+</TelerikChart>
+
+@code {
+ public class GraphDataPoint
+ {
+ public required string Color { get; set; }
+ public required int Value { get; set; }
+ public required string Label { get; set; }
+ }
+
+ private List<GraphDataPoint> _graphDataPoints { get; set; } = [
+ new GraphDataPoint
+ {
+ Label = "Early Settlement Candidate",
+ Value = 1024,
+ Color = "#D46663"
+ },
+ new GraphDataPoint
+ {
+ Label = "Needs Discovery to Strategize",
+ Value = 980,
+ Color = "#F89995"
+ },
+ new GraphDataPoint
+ {
+ Label = "Potential Dispositive Candidate",
+ Value = 1006,
+ Color = "#FFC7C7"
+ },
+ new GraphDataPoint
+ {
+ Label = "Potential Trial Candidate",
+ Value = 1003,
+ Color = "#BCDCCF",
+ },
+ new GraphDataPoint
+ {
+ Label = "Settlement Candidate",
+ Value = 987,
+ Color = "#79C8AB"
+ }
+ ];
+}
+`````
From 07f90896593ab32acad769b716a220c9674191c1 Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com>
Date: Mon, 5 May 2025 09:44:33 +0300
Subject: [PATCH 2/6] Update
knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
---
...nd-colors-not-matching-stacked-bar-chart.md | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md b/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
index e8f35478ea..0466298499 100644
--- a/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
+++ b/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
@@ -39,7 +39,7 @@ Here is an example configuration that applies a specific color to each series in
`````Razor
<TelerikChart Width="100%" Height="100%">
<ChartSeriesItems>
- @foreach (var series in _graphDataPoints)
+ @foreach (var series in GraphDataPoints)
{
<ChartSeries Field="@nameof(GraphDataPoint.Value)"
Type="ChartSeriesType.Bar"
@@ -54,14 +54,7 @@ Here is an example configuration that applies a specific color to each series in
</TelerikChart>
@code {
- public class GraphDataPoint
- {
- public required string Color { get; set; }
- public required int Value { get; set; }
- public required string Label { get; set; }
- }
-
- private List<GraphDataPoint> _graphDataPoints { get; set; } = [
+ private List<GraphDataPoint> GraphDataPoints { get; set; } = [
new GraphDataPoint
{
Label = "Early Settlement Candidate",
@@ -93,5 +86,12 @@ Here is an example configuration that applies a specific color to each series in
Color = "#79C8AB"
}
];
+
+ public class GraphDataPoint
+ {
+ public required string Color { get; set; }
+ public required int Value { get; set; }
+ public required string Label { get; set; }
+ }
}
`````
From e456fadaad3fb63db1f8b29dcc1ba6343f8832ad Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com>
Date: Mon, 5 May 2025 09:44:40 +0300
Subject: [PATCH 3/6] Update
knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
---
.../chart-legend-colors-not-matching-stacked-bar-chart.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md b/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
index 0466298499..d7b724143d 100644
--- a/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
+++ b/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
@@ -28,7 +28,7 @@ When creating a Chart with Stacked Series, the colors of the data points render
This behavior is by design. Using the `ColorField` parameter to assign a unique color to each data point within a single series is supported in **non-stacked** Charts, but not in stacked Charts.
-Stacked Charts are designed to visualize the cumulative value of multiple series stacked atop one another. Applying individual colors to each data point in this context would compromise the visual clarity of the stack relationships and make it difficult for the legend to accurately reflect the data.
+Stacked Charts are designed to display the combined values of multiple series stacked together. Assigning unique colors to individual data points in this scenario can reduce the visual clarity of the stack relationships and prevent the legend from accurately representing the data.
## Solution
From 963b48f2386291ead6bb060e5ddfb37a924d132f Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com>
Date: Mon, 5 May 2025 09:44:45 +0300
Subject: [PATCH 4/6] Update
knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
---
.../chart-legend-colors-not-matching-stacked-bar-chart.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md b/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
index d7b724143d..dc63f20198 100644
--- a/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
+++ b/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
@@ -34,7 +34,7 @@ Stacked Charts are designed to display the combined values of multiple series st
To ensure that the legend colors match the data points in a stacked Chart, use the `Color` parameter of the `ChartSeries`. This parameter sets a uniform color for all data points (bars) within a single series and determines the color shown in the legend for that series.
-Here is an example configuration that applies a specific color to each series in a stacked bar chart:
+Here is an example configuration that applies a specific color to each `ChartSeries` in a Stacked Bar Chart:
`````Razor
<TelerikChart Width="100%" Height="100%">
From 1a658f106d2fb23bc6d76166008d9bab9c3ad89b Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com>
Date: Mon, 5 May 2025 09:44:51 +0300
Subject: [PATCH 5/6] Update
knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
---
.../chart-legend-colors-not-matching-stacked-bar-chart.md | 1 -
1 file changed, 1 deletion(-)
diff --git a/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md b/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
index dc63f20198..20c8fb8d05 100644
--- a/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
+++ b/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
@@ -94,4 +94,3 @@ Here is an example configuration that applies a specific color to each `ChartSer
public required string Label { get; set; }
}
}
-`````
From 37ccd37fcbe95cec99f8433fb2040ab17f48fb73 Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com>
Date: Mon, 5 May 2025 09:44:56 +0300
Subject: [PATCH 6/6] Update
knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
---
.../chart-legend-colors-not-matching-stacked-bar-chart.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md b/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
index 20c8fb8d05..b81fab7062 100644
--- a/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
+++ b/knowledge-base/chart-legend-colors-not-matching-stacked-bar-chart.md
@@ -36,7 +36,7 @@ To ensure that the legend colors match the data points in a stacked Chart, use t
Here is an example configuration that applies a specific color to each `ChartSeries` in a Stacked Bar Chart:
-`````Razor
+````RAZOR
<TelerikChart Width="100%" Height="100%">
<ChartSeriesItems>
@foreach (var series in GraphDataPoints)