From f71d39257ea50c2f9d37991ab6f619ff996467cf Mon Sep 17 00:00:00 2001 From: KB Bot 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 000000000..e8f35478e --- /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 + + + + + + + + +
ProductCharts for Blazor
+ +## 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 + + + @foreach (var series in _graphDataPoints) + { + + + + } + + + + +@code { + public class GraphDataPoint + { + public required string Color { get; set; } + public required int Value { get; set; } + public required string Label { get; set; } + } + + private List _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 eba25ca5b145948e133f3ece6ea40f8acdb1e4db 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 e8f35478e..046629849 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 - @foreach (var series in _graphDataPoints) + @foreach (var series in GraphDataPoints) { @code { - public class GraphDataPoint - { - public required string Color { get; set; } - public required int Value { get; set; } - public required string Label { get; set; } - } - - private List _graphDataPoints { get; set; } = [ + private List 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 7ae3520dbd1c1f14e7a3d574c223f2ebf4129ab0 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 046629849..d7b724143 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 79830f4573007d7d87b20157d23b85113ed8e233 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 d7b724143..dc63f2019 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 From 8ce97484587e8626b859ca8566f163e572e2f53e 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 dc63f2019..20c8fb8d0 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 69e1c0ae03f46426005712af12ce26d1612d7c8f 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 20c8fb8d0..b81fab706 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 @foreach (var series in GraphDataPoints)