Also known as a Range Bar, Column Graph, Floating Bar Graph, Difference Graph, High-Low Graph
This example shows creation of a Span Chart made on user side by utilizing RectangleSeries. Span Charts display categorized value ranges - focusing only on the extreme values. Each category can have multiple 'spans'.
Here's the creation of a Span Chart using a pre-defined interface.
// Create Chart. const chart = spanChart() // Add categories. const tools = chart.addCategory('Tools') const fools = chart.addCategory('Fools') // Add spans as min-max. tools.addSpan(100, 150) fools.addSpan(50, 75) // Adding a span returns the actual Figure that represents it, which can be styled. fools.addSpan(200, 250) .setFillStyle(new SolidFill().setColor(prettyColor)) .setStrokeStyle(emptyLine)
The actual Span Chart logic just serves to provide a starting point for users to create their own API based on their needs and preferences. The functionality can be easily extended to construct Gantt Chart.