Time Series Charts

Specialized visualizations for temporal sequences, financial data, and multi-period comparisons. These charts handle the unique challenges of time-based data: showing change, comparing periods, and revealing patterns that emerge only when data unfolds over time.

Candlestick

Display price movements with open, high, low, and close values for each time period. Candlestick charts encode direction (up or down) through color and show price range through the wick and body. Traders rely on candlestick patterns to identify market sentiment, reversals, and continuation signals.

Configuration

Parameter	Type	Default	Description
type	string	-	'candlestick'
dateField	string	'date'	Date/time field
openField	string	'open'	Opening price field
highField	string	'high'	High price field
lowField	string	'low'	Low price field
closeField	string	'close'	Closing price field
upColor	string	'#26a69a'	Color for up candles
downColor	string	'#ef5350'	Color for down candles
wickWidth	number	1	Width of wick lines

Basic Example

View Source

type: candlestick
engine: d3
title: Stock Price
dateField: date
openField: open
highField: high
lowField: low
closeField: close
width: 600
height: 400
data:
  source: '[{"date": "2024-01-01", "open": 100, "high": 105, "low": 98, "close": 103}, {"date": "2024-01-02", "open": 103, "high": 108, "low": 102, "close": 106}, {"date": "2024-01-03", "open": 106, "high": 110, "low": 104, "close": 105}, {"date": "2024-01-04", "open": 105, "high": 107, "low": 100, "close": 102}, {"date": "2024-01-05", "open": 102, "high": 109, "low": 101, "close": 108}, {"date": "2024-01-06", "open": 108, "high": 115, "low": 107, "close": 113}, {"date": "2024-01-07", "open": 113, "high": 118, "low": 111, "close": 116}]'

Custom Colors

View Source

type: candlestick
engine: d3
title: BTC/USD
dateField: date
openField: open
highField: high
lowField: low
closeField: close
upColor: "#00c853"
downColor: "#ff1744"
width: 600
height: 400
data:
  source: '[{"date": "2024-01-01", "open": 42000, "high": 43500, "low": 41500, "close": 43200}, {"date": "2024-01-02", "open": 43200, "high": 44000, "low": 42800, "close": 42500}, {"date": "2024-01-03", "open": 42500, "high": 43800, "low": 42000, "close": 43600}, {"date": "2024-01-04", "open": 43600, "high": 45000, "low": 43200, "close": 44800}, {"date": "2024-01-05", "open": 44800, "high": 46200, "low": 44500, "close": 45900}]'

Slope Chart

Compare values between exactly two time periods with lines connecting each entity's before and after positions. Slope charts make it immediately clear which items improved, declined, or stayed flat. The angle and direction of each line tells the story: steep upward lines show dramatic gains, crossing lines reveal rank changes.

Configuration

Parameter	Type	Default	Description
type	string	-	'slope'
x	string	required	Category/item field
y	string	required	Value field
time	string	required	Time period field
lineWidth	number	2	Connection line width
dotRadius	number	4	Point radius
leftLabel	string	'Before'	Left axis label
rightLabel	string	'After'	Right axis label
colorScheme	string	'schemeCategory10'	Color palette

Basic Example

View Source

type: slope
engine: d3
x: country
y: value
time: year
title: GDP Change 2020-2023
leftLabel: "2020"
rightLabel: "2023"
width: 500
height: 400
data:
  source: '[{"country": "USA", "value": 21000, "year": "2020"}, {"country": "USA", "value": 25500, "year": "2023"}, {"country": "China", "value": 14700, "year": "2020"}, {"country": "China", "value": 17800, "year": "2023"}, {"country": "Japan", "value": 5000, "year": "2020"}, {"country": "Japan", "value": 4200, "year": "2023"}, {"country": "Germany", "value": 3800, "year": "2020"}, {"country": "Germany", "value": 4400, "year": "2023"}]'

Horizon Chart

Compress time series into layered bands that fold extreme values back onto the baseline. Horizon charts pack multiple series into minimal vertical space while preserving the ability to read fine details. Color intensity encodes magnitude: darker shades indicate values further from zero, making it easy to spot anomalies across many parallel series.

Configuration

Parameter	Type	Default	Description
type	string	-	'horizon'
x	string	required	Time field
y	string	required	Value field
bands	number	3	Number of color bands
mode	string	'offset'	'offset' or 'mirror'
colorScheme	string	'schemeBlues'	Color palette

Basic Example

View Source

type: horizon
engine: d3
x: date
y: temperature
title: Temperature Anomaly
bands: 4
width: 600
height: 200
data:
  source: '[{"date": "2024-01", "temperature": 2.1}, {"date": "2024-02", "temperature": 1.8}, {"date": "2024-03", "temperature": 0.5}, {"date": "2024-04", "temperature": -0.3}, {"date": "2024-05", "temperature": -1.2}, {"date": "2024-06", "temperature": 0.8}, {"date": "2024-07", "temperature": 2.5}, {"date": "2024-08", "temperature": 3.1}, {"date": "2024-09", "temperature": 1.9}, {"date": "2024-10", "temperature": 0.2}, {"date": "2024-11", "temperature": -0.8}, {"date": "2024-12", "temperature": 1.4}]'

Parallel Coordinates

Plot each data record as a line crossing multiple vertical axes, one per variable. Parallel coordinates reveal relationships between many dimensions simultaneously: clusters appear as bundles of parallel lines, outliers as lines that diverge from the pack, and correlations as consistent patterns between adjacent axes.

Configuration

Parameter	Type	Default	Description
type	string	-	'parallel-coords'
dimensions	array	required	List of numeric fields
color	string	-	Field for line coloring
lineOpacity	number	0.5	Line transparency
colorScheme	string	'schemeCategory10'	Color palette

Basic Example

View Source

type: parallel-coords
engine: d3
title: Car Attributes
color: origin
width: 650
height: 400
dimensions:
  - mpg
  - cylinders
  - horsepower
  - weight
data:
  source: '[{"mpg": 32, "cylinders": 4, "horsepower": 90, "weight": 2200, "origin": "Japan"}, {"mpg": 28, "cylinders": 4, "horsepower": 110, "weight": 2500, "origin": "Europe"}, {"mpg": 18, "cylinders": 8, "horsepower": 200, "weight": 3800, "origin": "USA"}, {"mpg": 22, "cylinders": 6, "horsepower": 150, "weight": 3200, "origin": "USA"}, {"mpg": 35, "cylinders": 4, "horsepower": 85, "weight": 2000, "origin": "Japan"}, {"mpg": 25, "cylinders": 6, "horsepower": 130, "weight": 2900, "origin": "Europe"}]'

---

Type Aliases

Primary	Aliases
candlestick	ohlc, stock, lines/candlestick
slope	slopegraph, slope-graph, lines/slope
horizon	lines/horizon
parallel-coords	parallel-coordinates, lines/parallel-coords