Using Chart JS within a Blazor WASM Project

I recently had to implement some multi axis charts in a Blazor project for a client, I started using an open source nuget package but it hadn’t been updated in over 12 months and the documentation was very limited. It was ok for simple graphs but when things got more complicated the cracks started to show.

ChartJS has a mind boggling array of options to configure, even the official documentation doesn’t quite seem to cover all combinations. It’s also constantly getting new features added which tells me a Blazor native wrapper componet will be next to impossible to maintain, so I’d need to find a solution that was closer to the real Javascript version.

Eventually I found this interesting blog post where he uses an anonymous type to pass in the chart config to the Javascript side without requiring much Javascript interop code.

I used my own implementation using that concept for my client and it’s working really well (see below), I’ve posted a sample and documented how to do it over in this github repo.

ChartJS Charts Blazor WASM

Leave a Reply

Your email address will not be published. Required fields are marked *