JavaScript Span Chart

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.