ChartTitle has a Color property, but ChartLegend does not. How can I change the text to white?
1 Answer, 1 is accepted
1
Accepted
Svetoslav Dimitrov
Telerik team
answered on 11 Apr 2022, 10:36 AM
Hello David,
You can use the ChartLegendLabels tag and the exposed Color attribute to change the text color. Below, I have added a basic code snippet where you can see the configuration.
<TelerikChartClass="custom-legend-color"><ChartSeriesItems><ChartSeriesType="ChartSeriesType.Line"Name="Product 1 (bound to simple data)"Data="@simpleData"></ChartSeries><ChartSeriesType="ChartSeriesType.Line"Name="Product 2 (bound to model)"Data="@modelData"Field="@nameof(MyDataModel.SecondSeriesValue)"><ChartSeriesLabelsTemplate="#=value# in #=dataItem.ExtraData# quarter"Visible="true"></ChartSeriesLabels></ChartSeries></ChartSeriesItems><ChartValueAxes><ChartValueAxisColor="red"></ChartValueAxis></ChartValueAxes><ChartCategoryAxes><ChartCategoryAxisCategories="@xAxisItems"></ChartCategoryAxis></ChartCategoryAxes><ChartTitleText="Quarterly sales trend"></ChartTitle><ChartLegendPosition="Telerik.Blazor.ChartLegendPosition.Bottom"><ChartLegendLabelsColor="yellow"></ChartLegendLabels></ChartLegend></TelerikChart>
@code {
public class MyDataModel
{
public int SecondSeriesValue { get; set; }
public string ExtraData { get; set; }
}
public List<MyDataModel> modelData = new List<MyDataModel>()
{
new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" },
new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" },
new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" },
new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" },
};
public List<object> simpleData = new List<object>() { 10, 2, 7, 5 };
public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}
Regards,
Svetoslav Dimitrov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.