Changing color of axis labelling on a Blazorise Linechart

Question

i am working on a Blazorise project with LineChart's on the page. I would now change the color of the axis labelling of the LineChart component and i don't know it. Has anyone an idea? I would appreciate some help.

regards elu

Answer 1

For my project's target framework is .net7, you can use LineChartOptions to set the color for both the X and Y-axis labels:

lineChartOptions = new LineChartOptions
{
    Scales = new ChartScales
    {
        X = new ChartAxis
        {
            Ticks = new ChartAxisTicks
            {
                Color = "red" // Set X-axis label color
            }
        },
        Y = new ChartAxis
        {
            Ticks = new ChartAxisTicks
            {
                Color = "blue" // Set Y-axis label color
            }
        }
    }
};

---

A whole working demo

@page "/"
@using Blazorise.Charts
<LineChart @ref="lineChart" TItem="double" Options="@lineChartOptions" Data="@lineChartData" />
@code{
    private LineChart<double>? lineChart;
    private LineChartOptions lineChartOptions = new();
    private LineChartDataset<double> lineChartDataset = new();
    private ChartData<double> lineChartData = new();

    protected override Task OnInitializedAsync()
    {
        lineChartOptions = new LineChartOptions
            {
                Scales = new ChartScales
                {
                    X = new ChartAxis
                    {
                        Ticks = new ChartAxisTicks
                        {
                            Color = "red" // Set X-axis label color
                        }
                    },
                    Y = new ChartAxis
                    {
                        Ticks = new ChartAxisTicks
                        {
                            Color = "blue" // Set Y-axis label color
                        }
                    }
                }
            };

        lineChartDataset = new LineChartDataset<double>
            {
                Data = new List<double> { 5, 12, 16, 21, 25, 30 }, // Sample data
                Label = "Sample Data",
                // Customize your dataset here
            };

        lineChartData = new ChartData<double>
            {
                Labels = new List<object> { "January", "February", "March", "April", "May", "June" }, // Sample labels
                Datasets = new List<ChartDataset<double>> { lineChartDataset }
            };

        return Task.CompletedTask;
    }
}

Result:

---

Besides, if you use other version, you can try ChartOptions. Just replace my shared code of LineChartOptions.