asp.net-coreblazorblazorise

Changing color of axis labelling on a Blazorise Linechart


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


Solution

  • 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: enter image description here


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