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.
- XY cartesian chart: ChartXY
- Rectangle series: RectangleSeries
- Axis: Axis
- Empty TickStyle: emptyTick
- Solid FillStyle: SolidFill
- Empty FillStyle: emptyFill
- Solid LineStyle: SolidLine
- Empty LineStyle: emptyLine
- RGBA color factory: ColorRGBA
- Color palettes: ColorPalettes
© Arction Ltd 2009-2020. All rights reserved.