Gantt Chart support for ChartJs.Blazor

Integrating another chart type - what could possibly go wrong?

Background

I'm using Blazor in another project and needed to show some time based data in a Gantt chart. A quick web search showed a few commercial Blazor Gantt chart components, no free ones and a handful of open source, Javascript ones. The most promising one was Gantt plugin, which is a plugin to draw gantt series in Chart.js library.

As I'm already using Blazorise, which already has a charts extension, how difficult would it be to integrate another chart type? The answer is quite difficult :-(

After that abortive effort, this integration actually works!

Gant plugin overview

Gratuitous screenshots

Sample chart

Basic

Different styles

Different sizes

Time scale

Other

Gantt dataset supports two types of axes:

• linear-gantt — the scale is inherited from the linear scale
• time-gantt — the scale is inherited from the time scale

Summary

• ChartsJs.Blazorise code generally well written and easy to follow
• chartjs-plugin-gantt code a bit obfuscated but probably due to my lack of Javascript
• integration relatively straightforward
• some changes required to ChartsJs.Blazorise code
  • could implement as a plugin by unsealing various classes
• able to show a sample gantt chart
• .NET DateTime structures have to be marshalled to Javascript as double in order for chartjs-plugin-gantt to recognise data as a Javascript Date
  • diagnosing this required debugging chartjs-plugin-gantt Javascript code in the browser (!)
• Chart.js has a huge number of options and it was unclear which applied to chartjs-plugin-gantt
  • various gantt chart options were blindly copied from bar chart, so a lot of options may not be applicable