Added new kb article chart-legend-colors-not-matching-stacked-bar-chart

[kendo-bot]

No description provided.

[github-actions]

Hello @xristianstefanov,

Check the below option if you would like to automatically generate PR to production. The automation uses the branch for the cherry-pick, and then will delete the branch. Please, do not delete it manually.

• create PR to production

[Tsvetomir-Hr]

Suggested change

	<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"
	}
	];
	}
	<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 {
	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"
	}
	];
	public class GraphDataPoint
	{
	public required string Color { get; set; }
	public required int Value { get; set; }
	public required string Label { get; set; }
	}
	}

Change the data collection property name to PascalCase and move the GraphDataModel last in the code block

[Tsvetomir-Hr]

Suggested change

	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.

[Tsvetomir-Hr]

Suggested change

	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:

[Tsvetomir-Hr]

Suggested change

`````

[Tsvetomir-Hr]

Suggested change

	`````Razor
	````RAZOR

[Tsvetomir-Hr]

You can also add, ##See Also section for CEO