Question How to change chart axis color

[imtrobin]

Hi, I'm trying to change the chart axis color, I do this, it is null object reference.

        async Task                                                          HandleRedraw ()
        {
            await lineChart.Clear()
                                    .ConfigureAwait (false);
            await lineChart.AddLabelsDatasetsAndUpdate (Labels, GetLineChartDataset())
                                                                                    .ConfigureAwait (false);
            lineChart.Options.Scales.YAxes.ForEach (x => x.ScaleLabel.FontColor = "#ff0000"); // Null object error
      }

I put on OnAfterRenderAsync, it also null object error.

I'm thinking of using the Labels/Dataset, but they are protected, not public

linechart.Labels   .. // protected, not public
linechart.Datasets   .. // protected, not public

[stsrki]

Based on this answer https://stackoverflow.com/questions/41958548/chartjs-change-axis-line-color it should be something like this:

<LineChart @ref="lineChart" TItem="double" Options="@options" />

@code{
    ChartOptions options = new LineChartOptions
    {
        Scales = new Scales {
            XAxes = new List<Axis> {
                new Axis {
                    GridLines = new AxeGridLines {
                        Color = "#131c2b"
                    }
                }
            },
            YAxes = new List<Axis> {
                new Axis {
                    GridLines = new AxeGridLines {
                        Color = "#131c2b"
                    }
                }
            }
        }
    };
}

[imtrobin]

Thanks but it didn't work

<LineChart @ref="lineChart" TItem="double" Options="@options"/>

LineChartOptions options = new LineChartOptions
        {
            Scales = new Scales {
                XAxes = new List<Axis> {
                    new Axis {
                        GridLines = new AxeGridLines {
                            Color = "#ff0000"
                        }
                    }
                },
                YAxes = new List<Axis> {
                    new Axis {
                        GridLines = new AxeGridLines {
                            Color = "#00ff00"
                        }
                    }
                }
            }
        };

[imtrobin]

I looked at blazorise.chart.js, the options object seems to be passed as list, but the link you gave me is an array

[stsrki]

This works

<LineChart @ref="lineChart" TItem="double" Options="@options" />

@code{
    LineChartOptions options = new LineChartOptions
    {
        Scales = new Scales
        {
            XAxes = new List<Axis> {
                new Axis {
                    GridLines = new AxeGridLines {
                        Color = "#ff0000"
                    }
                }
            },
            YAxes = new List<Axis> {
                new Axis {
                    GridLines = new AxeGridLines {
                        Color = "#00ff00"
                    }
                }
            }
        }
    };
}

[imtrobin]

That's really weird, I'm using demo bootstrap RC, didn't work in Opera and Edge.

[stsrki]

Tried RC demo in Edge and it also works

[imtrobin]

Hmm, I updated to latest source, git check modification shows only these two changes, erased cache, delete bin/obj folder, full rebuild, but still not working.

What did you do differently?

[stsrki]

Nothing actually. Those are the only changes I have done in the demo app.

[imtrobin]

I tried debug/release, material, all no change. No errors in console output either.

[imtrobin]

In another test project, I'm using another ChartJS library, and I could customize font colors fine so its not my system.

https://github.com/mariusmuntean/ChartJs.Blazor

I also noticed you are not using latest version of chartjs, it looks like 2.9.3 now

[stsrki]

So, I included latest version of chartjs <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>, and it works. I really have no idea why it should not work on your system.

[imtrobin]

No idea, can you please send me a release bin and I try to run on my side?

[stsrki]

Debug.zip

It should be on visible on http://localhost:8211/

[imtrobin]

Thanks, I noticed something weird from your Debug.zip

1. you are running Blazorise.Demo.Bootstrap from what I see in the launchsettings.json , it is webassembly, but the build is .netcoreapp3. Webassembly should be .netstandard2.1

Since the beginning, I couldn't get Blazorise.Demo.Bootstrap to run, It will give me this

So I'm using the server hosted Blazorise.Demo.Bootstrap.RC instead. My own project where I setup webassembly with blazorise, it works fine.

2. Your say it's port 8211, the launchsettings.json is saying 7678/7679. The 8211 port is in launchsettings on Blazorise.Demo.Bootstrap.Server

It seems you are not running from master branch, I'm running directly from master branch,

[stsrki]

• Blazorise.Demo.Bootstrap is just WebAssemly project, and it is set for netstandard2.1. It cannot be run directly.
• Blazorise.Demo.Bootstrap.Server is the host application for WebAssembly that runs on IIS and it is using Blazorise.Demo.Bootstrap as a client app. That one is set for netcoreapp3.1.
• Blazorise.Demo.Bootstrap.RC is the server-side Blazor app that runs fully on .netcoreapp3.1

[imtrobin]

I don't understand, why can't we run webassembly directly? In my own project which is netstandard2.1, I can run fine and Publish to a folder and deploy.

[stsrki]

You have probably selected WebAssembly project without net core part when you have first created your project. Blazor comes with three project templates. WebAssembly, WebAssembly + NetCore host, and Blazor Server.

[imtrobin]

Yes, I did that in my project, I want webassembly client only. I created new .net core host project, as you can see, the client is using netstandard2.1.

How did you get client app as netcoreapp3.1

[stsrki]

Check your BlazorApp3.Server. It should say netcoreapp3.1

[imtrobin]

Yes, the server is netcoreapp3.1. So what did you pass me in Debug.zip? It looks like a server and client. How do you run it? I run the exe and the localhost is not valid

[stsrki]

I already mention it, you should run it on http://localhost:8211/

[imtrobin]

[stsrki]

It seems http://localhost:8211/ worked for me last time because I had Blazorise solution already opened. Can you run Blazorise.Demo.Bootstrap.Server from VisualStudio if you already didn't?

But anyways I think we stranded far from original problem.

[imtrobin]

I agree. I'm not sure what the Debug.zip you pass me will do. If I run Blazorise.Demo.Bootstrap.Server from Visual studio, the IIS Express is tied to that. I replace the bin folder and no difference.

What I really wanted was a Published webassembly build from you, so I can run it on a local webserver to check.

[imtrobin]

So I try the PieChart, and it seem that the Options are not completely mapped? Eg.

E.g Legend has Labels object that can customize color but I don't see it in

https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

[stsrki]

Could be they added more options for Legend in the latest versions of chartjs. It's fairly easy to add new fields.

Btw, do you still have original problem with axis color?

[imtrobin]

Yes, not resolved. I'm trying other parts of chartjs to learn about it.