Gantt Chart support for Blazorise.Charts

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?

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

What went right

• Blazorise.Charts 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
• able to show a sample gantt chart

What went wrong

• Chart.js has a huge number of options and it was unclear which applied to chartjs-plugin-gantt
• could not support time based gantt charts due to JSON serialiser issues
  • this was a complete show stopper

Summary

Since it was not possible to support time based gannt charts, it was pointless to continue. I hope someone finds this code and information useful.

There are some interesting links below:

• Blazorise.Charts and ChartJs.Blazor
• ChartJs.Blazor
• Difficult times

ChartJs.Blazor showed the most promise:

• fork of ChartJs.Blazor with gannt chart support