Line
type="line"Left and right arrow keys move between data points, up and down between series, Enter selects.
One value as it moves. The chart to reach for first, and the one a reader never has to be taught.
Charts
29 charts, drawn without a dependency
One SVG engine, no plotting library underneath, driven by the options object ApexCharts made familiar. Everything visual is plain data, so it survives JSON and a settings screen can write it. Each chart is named by a summary generated from its own data, and its plot takes focus: the arrow keys read it point by point.
Over time
Line, several series
type="line"Two or three lines compare shapes. Past four, the plot becomes a knot and a small multiple reads better.
template
<Chart type="line" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'API',
data: [
120,
150,
140,
180,
210,
190,
240,
260,
250,
290,
310,
330
]
},
{
name: 'Web',
data: [
80,
90,
110,
100,
130,
150,
140,
160,
180,
170,
200,
220
]
},
{
name: 'Jobs',
data: [
30,
28,
35,
40,
38,
42,
46,
50,
48,
53,
56,
60
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
},
xaxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
stroke: {
curve: 'smooth',
width: 2
},
markers: {
size: 0
}
};Area, stacked
type="area"A total over time, and what it is made of. Stacked, the top edge is the total; unstacked, the fills overlap and mislead.
template
<Chart type="area" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'API',
data: [
120,
150,
140,
180,
210,
190,
240,
260,
250,
290,
310,
330
]
},
{
name: 'Web',
data: [
80,
90,
110,
100,
130,
150,
140,
160,
180,
170,
200,
220
]
},
{
name: 'Jobs',
data: [
30,
28,
35,
40,
38,
42,
46,
50,
48,
53,
56,
60
]
}
];
const options = {
chart: {
stacked: true,
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
},
xaxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
stroke: {
curve: 'monotoneCubic',
width: 2
}
};Range area
type="rangeArea"Left and right arrow keys move between data points, up and down between series, Enter selects.
The band between a low and a high, month by month: a forecast’s spread, or the day’s range. One fill, two edges.
template
<Chart type="rangeArea" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Forecast',
data: [
{
x: 'Jan',
y: [
40,
70
]
},
{
x: 'Feb',
y: [
44,
76
]
},
{
x: 'Mar',
y: [
48,
82
]
},
{
x: 'Apr',
y: [
52,
88
]
},
{
x: 'May',
y: [
56,
94
]
},
{
x: 'Jun',
y: [
60,
100
]
},
{
x: 'Jul',
y: [
64,
106
]
},
{
x: 'Aug',
y: [
68,
112
]
},
{
x: 'Sep',
y: [
72,
118
]
},
{
x: 'Oct',
y: [
76,
124
]
},
{
x: 'Nov',
y: [
80,
130
]
},
{
x: 'Dec',
y: [
84,
136
]
}
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
stroke: {
curve: 'smooth',
width: 2
}
};Stream
type="stream"A stacked area floating on a baseline of its own. The bands share the movement instead of the bottom one carrying it, which is what makes the shape readable.
template
<Chart type="stream" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Search',
data: [
30,
43,
53,
57,
55,
49,
41,
36,
36,
42,
53,
66
]
},
{
name: 'Direct',
data: [
53,
55,
52,
44,
35,
29,
27,
31,
41,
53,
64,
70
]
},
{
name: 'Social',
data: [
55,
49,
41,
36,
36,
42,
53,
66,
79,
87,
89,
85
]
},
{
name: 'Mail',
data: [
41,
35,
33,
37,
47,
59,
70,
76,
77,
72,
63,
55
]
},
{
name: 'Referral',
data: [
36,
42,
53,
66,
79,
87,
89,
85,
78,
71,
67,
69
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
},
xaxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
}
};Bars and a line
type="bar"Two marks on one plot: the amount as bars, the rate as a line, each on its own axis. Every series names the mark it wants.
template
<Chart type="bar" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Revenue',
type: 'bar',
data: [
44,
55,
41,
67,
22,
43,
58,
63,
60,
66,
70,
81
]
},
{
name: 'Margin',
type: 'line',
data: [
12,
14,
13,
18,
9,
12,
15,
17,
16,
18,
19,
22
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
},
xaxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yaxis: [
{
title: {
text: 'Revenue'
}
},
{
opposite: true,
title: {
text: 'Margin'
}
}
],
stroke: {
width: [
0,
3
],
curve: 'smooth'
}
};Candlestick
type="candlestick"Left and right arrow keys move between data points, up and down between series, Enter selects.
Four numbers a period: open, high, low and close. Each point is a tuple, in that order.
template
<Chart type="candlestick" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'ACME',
data: [
[
'Mon',
51,
58,
50,
56
],
[
'Tue',
56,
60,
55,
55
],
[
'Wed',
55,
57,
51,
52
],
[
'Thu',
52,
59,
52,
58
],
[
'Fri',
58,
64,
57,
63
],
[
'Sat',
63,
65,
60,
61
],
[
'Sun',
61,
66,
60,
65
]
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
}
};Calendar
type="calendar"Left and right arrow keys move between data points, up and down between series, Enter selects.
A year of days as a grid of weeks. A line of 365 points shows the trend; this shows the day, which is what a record of daily activity is read for.
template
<Chart type="calendar" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Commits',
data: [
{
x: 1767225600000,
y: 3
},
{
x: 1767312000000,
y: 12
},
{
x: 1767484800000,
y: 1
},
{
x: 1767571200000,
y: 1
},
{
x: 1767657600000,
y: 9
},
{
x: 1767744000000,
y: 3
},
{
x: 1767916800000,
y: 1
},
{
x: 1768089600000,
y: 2
},
{
x: 1768176000000,
y: 2
},
{
x: 1768262400000,
y: 5
},
{
x: 1768348800000,
y: 4
},
{
x: 1768435200000,
y: 1
},
{
x: 1768521600000,
y: 4
},
{
x: 1768608000000,
y: 2
},
{
x: 1768694400000,
y: 2
},
{
x: 1768780800000,
y: 10
},
{
x: 1769040000000,
y: 12
},
{
x: 1769126400000,
y: 10
},
{
x: 1769212800000,
y: 2
},
{
x: 1769299200000,
y: 4
},
{
x: 1769472000000,
y: 6
},
{
x: 1769558400000,
y: 4
},
{
x: 1769644800000,
y: 7
},
{
x: 1769731200000,
y: 12
},
{
x: 1769990400000,
y: 12
},
{
x: 1770076800000,
y: 13
},
{
x: 1770163200000,
y: 10
},
{
x: 1770249600000,
y: 1
},
{
x: 1770336000000,
y: 9
},
{
x: 1770422400000,
y: 1
},
{
x: 1770508800000,
y: 1
},
{
x: 1770595200000,
y: 7
},
{
x: 1770681600000,
y: 13
},
{
x: 1770768000000,
y: 3
},
{
x: 1770940800000,
y: 3
},
{
x: 1771200000000,
y: 10
},
{
x: 1771286400000,
y: 6
},
{
x: 1771372800000,
y: 2
},
{
x: 1771459200000,
y: 14
},
{
x: 1771545600000,
y: 11
},
{
x: 1771632000000,
y: 4
},
{
x: 1771718400000,
y: 1
},
{
x: 1771804800000,
y: 8
},
{
x: 1771891200000,
y: 13
},
{
x: 1771977600000,
y: 3
},
{
x: 1772150400000,
y: 1
},
{
x: 1772323200000,
y: 2
},
{
x: 1772409600000,
y: 2
},
{
x: 1772582400000,
y: 10
},
{
x: 1772668800000,
y: 4
},
{
x: 1772755200000,
y: 2
},
{
x: 1772841600000,
y: 4
},
{
x: 1772928000000,
y: 2
},
{
x: 1773014400000,
y: 8
},
{
x: 1773100800000,
y: 10
},
{
x: 1773187200000,
y: 3
},
{
x: 1773360000000,
y: 3
},
{
x: 1773446400000,
y: 2
},
{
x: 1773532800000,
y: 1
},
{
x: 1773619200000,
y: 14
},
{
x: 1773792000000,
y: 7
},
{
x: 1773878400000,
y: 12
},
{
x: 1773964800000,
y: 9
},
{
x: 1774051200000,
y: 2
},
{
x: 1774137600000,
y: 4
},
{
x: 1774224000000,
y: 8
},
{
x: 1774310400000,
y: 5
},
{
x: 1774396800000,
y: 6
},
{
x: 1774483200000,
y: 13
},
{
x: 1774569600000,
y: 11
},
{
x: 1774742400000,
y: 4
},
{
x: 1774915200000,
y: 5
},
{
x: 1775088000000,
y: 13
},
{
x: 1775174400000,
y: 5
},
{
x: 1775260800000,
y: 3
},
{
x: 1775347200000,
y: 3
},
{
x: 1775692800000,
y: 1
},
{
x: 1775779200000,
y: 11
},
{
x: 1775952000000,
y: 1
},
{
x: 1776038400000,
y: 9
},
{
x: 1776211200000,
y: 9
},
{
x: 1776556800000,
y: 3
},
{
x: 1776643200000,
y: 9
},
{
x: 1776729600000,
y: 3
},
{
x: 1776816000000,
y: 3
},
{
x: 1776902400000,
y: 4
},
{
x: 1776988800000,
y: 5
},
{
x: 1777248000000,
y: 9
},
{
x: 1777334400000,
y: 2
},
{
x: 1777420800000,
y: 1
},
{
x: 1777507200000,
y: 11
},
{
x: 1777593600000,
y: 1
},
{
x: 1777680000000,
y: 1
},
{
x: 1777766400000,
y: 2
},
{
x: 1777852800000,
y: 4
},
{
x: 1777939200000,
y: 1
},
{
x: 1778025600000,
y: 1
},
{
x: 1778198400000,
y: 12
},
{
x: 1778284800000,
y: 4
},
{
x: 1778371200000,
y: 4
},
{
x: 1778544000000,
y: 13
},
{
x: 1778630400000,
y: 2
},
{
x: 1778803200000,
y: 9
},
{
x: 1778889600000,
y: 2
},
{
x: 1779062400000,
y: 7
},
{
x: 1779148800000,
y: 14
},
{
x: 1779235200000,
y: 11
},
{
x: 1779321600000,
y: 5
},
{
x: 1779580800000,
y: 3
},
{
x: 1779667200000,
y: 2
},
{
x: 1779840000000,
y: 9
},
{
x: 1779926400000,
y: 13
},
{
x: 1780012800000,
y: 1
},
{
x: 1780099200000,
y: 2
},
{
x: 1780272000000,
y: 10
},
{
x: 1780358400000,
y: 14
},
{
x: 1780444800000,
y: 2
},
{
x: 1780617600000,
y: 13
},
{
x: 1780876800000,
y: 2
},
{
x: 1780963200000,
y: 10
},
{
x: 1781049600000,
y: 4
},
{
x: 1781136000000,
y: 1
},
{
x: 1781222400000,
y: 1
},
{
x: 1781308800000,
y: 1
},
{
x: 1781395200000,
y: 3
},
{
x: 1781481600000,
y: 12
},
{
x: 1781568000000,
y: 4
},
{
x: 1781654400000,
y: 1
},
{
x: 1781740800000,
y: 11
},
{
x: 1781827200000,
y: 6
},
{
x: 1781913600000,
y: 2
},
{
x: 1782000000000,
y: 2
},
{
x: 1782086400000,
y: 5
},
{
x: 1782172800000,
y: 9
},
{
x: 1782259200000,
y: 1
},
{
x: 1782345600000,
y: 9
},
{
x: 1782432000000,
y: 2
},
{
x: 1782518400000,
y: 4
},
{
x: 1782604800000,
y: 2
},
{
x: 1782777600000,
y: 5
},
{
x: 1782950400000,
y: 2
},
{
x: 1783036800000,
y: 9
},
{
x: 1783209600000,
y: 3
},
{
x: 1783296000000,
y: 3
},
{
x: 1783382400000,
y: 3
},
{
x: 1783555200000,
y: 2
},
{
x: 1783641600000,
y: 12
},
{
x: 1783728000000,
y: 4
},
{
x: 1783900800000,
y: 10
},
{
x: 1783987200000,
y: 6
},
{
x: 1784073600000,
y: 11
},
{
x: 1784160000000,
y: 13
},
{
x: 1784419200000,
y: 3
},
{
x: 1784505600000,
y: 13
},
{
x: 1784678400000,
y: 8
},
{
x: 1784764800000,
y: 4
},
{
x: 1784851200000,
y: 1
},
{
x: 1785196800000,
y: 3
},
{
x: 1785283200000,
y: 4
},
{
x: 1785369600000,
y: 13
},
{
x: 1785456000000,
y: 10
},
{
x: 1785542400000,
y: 3
},
{
x: 1785715200000,
y: 5
},
{
x: 1785801600000,
y: 3
},
{
x: 1785888000000,
y: 1
},
{
x: 1785974400000,
y: 6
},
{
x: 1786060800000,
y: 9
},
{
x: 1786147200000,
y: 2
},
{
x: 1787529600000,
y: 13
},
{
x: 1787616000000,
y: 4
},
{
x: 1787702400000,
y: 3
},
{
x: 1787875200000,
y: 14
},
{
x: 1787961600000,
y: 3
},
{
x: 1788134400000,
y: 11
},
{
x: 1788220800000,
y: 12
},
{
x: 1788307200000,
y: 6
},
{
x: 1788393600000,
y: 5
},
{
x: 1788480000000,
y: 12
},
{
x: 1788652800000,
y: 2
},
{
x: 1788739200000,
y: 2
},
{
x: 1788825600000,
y: 2
},
{
x: 1788912000000,
y: 9
},
{
x: 1788998400000,
y: 2
},
{
x: 1789084800000,
y: 10
},
{
x: 1789257600000,
y: 4
},
{
x: 1789344000000,
y: 7
},
{
x: 1789516800000,
y: 8
},
{
x: 1789603200000,
y: 5
},
{
x: 1789689600000,
y: 9
},
{
x: 1789776000000,
y: 4
},
{
x: 1789862400000,
y: 3
},
{
x: 1789948800000,
y: 12
},
{
x: 1790035200000,
y: 2
},
{
x: 1790121600000,
y: 13
},
{
x: 1790208000000,
y: 2
},
{
x: 1790294400000,
y: 4
},
{
x: 1790467200000,
y: 1
},
{
x: 1790553600000,
y: 8
},
{
x: 1790640000000,
y: 8
},
{
x: 1790726400000,
y: 7
},
{
x: 1790812800000,
y: 14
},
{
x: 1790899200000,
y: 6
},
{
x: 1791072000000,
y: 2
},
{
x: 1791158400000,
y: 14
},
{
x: 1791244800000,
y: 13
},
{
x: 1791331200000,
y: 3
},
{
x: 1791417600000,
y: 6
},
{
x: 1791504000000,
y: 4
},
{
x: 1791590400000,
y: 3
},
{
x: 1791676800000,
y: 2
},
{
x: 1791763200000,
y: 13
},
{
x: 1791849600000,
y: 7
},
{
x: 1791936000000,
y: 11
},
{
x: 1792108800000,
y: 3
},
{
x: 1792281600000,
y: 3
},
{
x: 1792368000000,
y: 1
},
{
x: 1792454400000,
y: 8
},
{
x: 1792540800000,
y: 11
},
{
x: 1792627200000,
y: 11
},
{
x: 1792713600000,
y: 1
},
{
x: 1792800000000,
y: 1
},
{
x: 1792886400000,
y: 1
},
{
x: 1792972800000,
y: 13
},
{
x: 1793059200000,
y: 14
},
{
x: 1793145600000,
y: 4
},
{
x: 1793232000000,
y: 8
},
{
x: 1793318400000,
y: 13
},
{
x: 1793404800000,
y: 2
},
{
x: 1793577600000,
y: 4
},
{
x: 1793750400000,
y: 2
},
{
x: 1793836800000,
y: 4
},
{
x: 1793923200000,
y: 10
},
{
x: 1794009600000,
y: 4
},
{
x: 1794096000000,
y: 1
},
{
x: 1794182400000,
y: 2
},
{
x: 1794268800000,
y: 1
},
{
x: 1794355200000,
y: 2
},
{
x: 1794441600000,
y: 11
},
{
x: 1794528000000,
y: 1
},
{
x: 1794614400000,
y: 1
},
{
x: 1794700800000,
y: 4
},
{
x: 1794873600000,
y: 10
},
{
x: 1794960000000,
y: 8
},
{
x: 1795132800000,
y: 8
},
{
x: 1795219200000,
y: 3
},
{
x: 1795392000000,
y: 10
},
{
x: 1795478400000,
y: 8
},
{
x: 1795564800000,
y: 12
},
{
x: 1795737600000,
y: 11
},
{
x: 1795824000000,
y: 4
},
{
x: 1795910400000,
y: 2
},
{
x: 1795996800000,
y: 1
},
{
x: 1796083200000,
y: 7
},
{
x: 1796169600000,
y: 13
},
{
x: 1796256000000,
y: 3
},
{
x: 1796342400000,
y: 13
},
{
x: 1796601600000,
y: 13
},
{
x: 1796688000000,
y: 4
},
{
x: 1796774400000,
y: 14
},
{
x: 1796860800000,
y: 8
},
{
x: 1796947200000,
y: 10
},
{
x: 1797120000000,
y: 1
},
{
x: 1797206400000,
y: 8
},
{
x: 1797379200000,
y: 3
},
{
x: 1797552000000,
y: 1
},
{
x: 1797638400000,
y: 3
},
{
x: 1797724800000,
y: 2
},
{
x: 1797811200000,
y: 9
},
{
x: 1797897600000,
y: 14
},
{
x: 1797984000000,
y: 11
},
{
x: 1798070400000,
y: 11
},
{
x: 1798156800000,
y: 7
},
{
x: 1798329600000,
y: 3
},
{
x: 1798416000000,
y: 2
},
{
x: 1798502400000,
y: 2
},
{
x: 1798588800000,
y: 13
},
{
x: 1798675200000,
y: 13
}
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
plotOptions: {
calendar: {
weekStart: 1
}
},
colors: [
'var(--vt-chart-3)'
]
};Compared
Bar, grouped
type="bar"Amounts side by side. The baseline has to be zero: a bar says how big, and a cut axis lies about it.
template
<Chart type="bar" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'North',
data: [
44,
55,
41,
67
]
},
{
name: 'South',
data: [
13,
23,
20,
8
]
},
{
name: 'East',
data: [
11,
17,
15,
15
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
},
xaxis: {
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
]
}
};Bar, stacked
type="bar"The total per category, split. Only the bottom band is easy to compare across categories — put the series that matters there.
template
<Chart type="bar" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'North',
data: [
44,
55,
41,
67
]
},
{
name: 'South',
data: [
13,
23,
20,
8
]
},
{
name: 'East',
data: [
11,
17,
15,
15
]
}
];
const options = {
chart: {
stacked: true,
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
},
xaxis: {
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
]
}
};Bar, to 100%
type="bar"Shares rather than amounts: every bar is full, so the mix is comparable and the size is gone.
template
<Chart type="bar" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'North',
data: [
44,
55,
41,
67
]
},
{
name: 'South',
data: [
13,
23,
20,
8
]
},
{
name: 'East',
data: [
11,
17,
15,
15
]
}
];
const options = {
chart: {
stacked: true,
stackType: '100%',
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
},
xaxis: {
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
]
}
};Bar, horizontal
type="bar"Left and right arrow keys move between data points, up and down between series, Enter selects.
Long category names, or many of them: the labels get the room they need and stay level.
template
<Chart type="bar" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Requests',
data: [
44,
55,
41,
67,
22,
43
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
plotOptions: {
bar: {
horizontal: true,
borderRadius: 4
}
},
xaxis: {
categories: [
'Authentication',
'Billing',
'Reporting',
'Search',
'Notifications',
'Exports'
]
}
};Lollipop
type="lollipop"Left and right arrow keys move between data points, up and down between series, Enter selects.
A bar with the ink taken out. The same comparison at a fraction of the weight, for a page with many of them.
template
<Chart type="lollipop" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Requests',
data: [
44,
55,
41,
67,
22,
43
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
xaxis: {
categories: [
'Authentication',
'Billing',
'Reporting',
'Search',
'Notifications',
'Exports'
],
labels: {
rotate: -35
}
}
};Waterfall
type="waterfall"Left and right arrow keys move between data points, up and down between series, Enter selects.
How a number got from one total to another. Each bar starts where the last one stopped; a total bar returns to zero.
template
<Chart type="waterfall" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Cash',
data: [
1200,
420,
-180,
310,
-260,
null
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
xaxis: {
categories: [
'Opening',
'Sales',
'Refunds',
'Services',
'Costs',
'Closing'
]
},
plotOptions: {
waterfall: {
totals: [
5
]
}
}
};Range bar
type="rangeBar"Left and right arrow keys move between data points, up and down between series, Enter selects.
A bar between two numbers instead of up from zero. Each point is `[low, high]`, so it reads as a span rather than an amount.
template
<Chart type="rangeBar" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Temperature',
data: [
{
x: 'Q1',
y: [
8,
17
]
},
{
x: 'Q2',
y: [
11,
21
]
},
{
x: 'Q3',
y: [
14,
25
]
},
{
x: 'Q4',
y: [
17,
29
]
}
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
yaxis: {
title: {
text: '°C'
}
}
};Bullet
type="bullet"Left and right arrow keys move between data points, up and down between series, Enter selects.
One measure, its target and the bands it falls in: a gauge’s job in a strip a table row can hold. The tick is the target, the bands are poor, fair and good.
template
<Chart type="bullet" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Against target',
data: [
{
x: 'Revenue',
y: 78,
target: 90
},
{
x: 'Signups',
y: 112,
target: 100
},
{
x: 'Retention',
y: 64,
target: 75
},
{
x: 'Margin',
y: 41,
target: 50
}
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
plotOptions: {
bullet: {
ranges: [
{
from: 0,
to: 130
},
{
from: 0,
to: 90
},
{
from: 0,
to: 55
}
]
}
}
};Spread
Scatter
type="scatter"Two measures against each other, one point a thing. What it is for is the shape of the cloud, not any one dot.
template
<Chart type="scatter" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Trial',
data: [
[
12,
40
],
[
18,
52
],
[
24,
47
],
[
30,
68
],
[
36,
71
],
[
41,
65
],
[
48,
83
],
[
54,
78
]
]
},
{
name: 'Paid',
data: [
[
15,
22
],
[
22,
31
],
[
28,
26
],
[
34,
44
],
[
39,
39
],
[
46,
51
],
[
52,
48
],
[
58,
62
]
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
},
xaxis: {
type: 'numeric',
title: {
text: 'Sessions'
}
},
yaxis: {
title: {
text: 'Minutes'
}
}
};Bubble
type="bubble"A scatter with a third number as the area. Area, not radius: doubling the radius would draw four times the quantity.
template
<Chart type="bubble" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Europe',
data: [
{
x: 12,
y: 40,
z: 18
},
{
x: 24,
y: 47,
z: 34
},
{
x: 36,
y: 71,
z: 12
},
{
x: 48,
y: 83,
z: 44
}
]
},
{
name: 'Americas',
data: [
{
x: 15,
y: 22,
z: 26
},
{
x: 28,
y: 26,
z: 14
},
{
x: 39,
y: 39,
z: 38
},
{
x: 52,
y: 48,
z: 22
}
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
},
xaxis: {
type: 'numeric'
}
};Heat map
type="heatmap"Left and right arrow keys move between data points, up and down between series, Enter selects.
A grid where colour is the value: two categories in, one measure out. Good for a week by an hour.
template
<Chart type="heatmap" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Mon',
data: [
{
x: '09',
y: 8
},
{
x: '11',
y: 63
},
{
x: '13',
y: 19
},
{
x: '15',
y: 74
},
{
x: '17',
y: 30
},
{
x: '19',
y: 85
}
]
},
{
name: 'Tue',
data: [
{
x: '09',
y: 85
},
{
x: '11',
y: 41
},
{
x: '13',
y: 96
},
{
x: '15',
y: 52
},
{
x: '17',
y: 8
},
{
x: '19',
y: 63
}
]
},
{
name: 'Wed',
data: [
{
x: '09',
y: 63
},
{
x: '11',
y: 19
},
{
x: '13',
y: 74
},
{
x: '15',
y: 30
},
{
x: '17',
y: 85
},
{
x: '19',
y: 41
}
]
},
{
name: 'Thu',
data: [
{
x: '09',
y: 41
},
{
x: '11',
y: 96
},
{
x: '13',
y: 52
},
{
x: '15',
y: 8
},
{
x: '17',
y: 63
},
{
x: '19',
y: 19
}
]
},
{
name: 'Fri',
data: [
{
x: '09',
y: 19
},
{
x: '11',
y: 74
},
{
x: '13',
y: 30
},
{
x: '15',
y: 85
},
{
x: '17',
y: 41
},
{
x: '19',
y: 96
}
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
}
};Histogram
type="histogram"Left and right arrow keys move between data points, up and down between series, Enter selects.
Raw readings in, counts out: the chart works out the bins itself. Pass a plain list of numbers, not categories.
template
<Chart type="histogram" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Response time',
data: [
38,
41,
44,
45,
47,
48,
49,
51,
52,
52,
53,
54,
55,
55,
56,
57,
58,
58,
59,
60,
61,
61,
62,
63,
64,
64,
65,
66,
67,
68,
69,
70,
71,
72,
73,
74,
76,
78,
80,
82,
84,
86,
88,
91,
94,
98,
103,
109,
118,
134
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
xaxis: {
title: {
text: 'Milliseconds'
}
},
yaxis: {
title: {
text: 'Requests'
}
}
};Box plot
type="boxPlot"Left and right arrow keys move between data points, up and down between series, Enter selects.
Five numbers a category — minimum, quartiles, median, maximum — so two distributions compare without either being averaged away.
template
<Chart type="boxPlot" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Response time',
data: [
{
x: 'API',
y: [
12,
28,
41,
63,
140
]
},
{
x: 'Web',
y: [
30,
52,
68,
90,
180
]
},
{
x: 'Jobs',
y: [
8,
15,
22,
34,
70
]
}
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
yaxis: {
title: {
text: 'Milliseconds'
}
}
};Parts of a whole
Treemap
type="treemap"Shares of a total as areas rather than as angles. It holds many more parts than a pie, and the boxes are laid squarely so none of them is a sliver.
template
<Chart type="treemap" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Europe',
data: [
{
x: 'Germany',
y: 84
},
{
x: 'France',
y: 68
},
{
x: 'Spain',
y: 47
},
{
x: 'Portugal',
y: 10
}
]
},
{
name: 'Americas',
data: [
{
x: 'United States',
y: 132
},
{
x: 'Brazil',
y: 72
},
{
x: 'Mexico',
y: 39
},
{
x: 'Chile',
y: 12
}
]
},
{
name: 'Asia',
data: [
{
x: 'Japan',
y: 61
},
{
x: 'India',
y: 55
},
{
x: 'Singapore',
y: 14
}
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
}
};Radial bar
type="radialBar"A ring a measure, as far round as its share of the maximum. Three or four at a time: they are read against their own tracks, not against each other.
template
<Chart type="radialBar" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Storage',
data: [
72
]
},
{
name: 'Memory',
data: [
48
]
},
{
name: 'CPU',
data: [
35
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
}
};Gauge
type="gauge"Left and right arrow keys move between data points, up and down between series, Enter selects.
One number against its maximum, with the reading in the middle. The arc leaves the bottom open, which is what tells it apart from a ring at a glance.
template
<Chart type="gauge" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Uptime',
data: [
96
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
},
colors: [
'var(--vt-chart-3)'
],
dataLabels: {
formatter: '{percent|percent:0}'
}
};Sunburst
type="sunburst"Left and right arrow keys move between data points, up and down between series, Enter selects.
A pie of several rings, one a level of a tree. It answers what a pie cannot — what a slice is made of — without leaving the circle.
template
<Chart type="sunburst" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Europe',
data: [
{
x: 'Germany',
y: 84
},
{
x: 'France',
y: 68
},
{
x: 'Spain',
y: 47
}
]
},
{
name: 'Americas',
data: [
{
x: 'United States',
y: 132
},
{
x: 'Brazil',
y: 72
},
{
x: 'Mexico',
y: 39
}
]
},
{
name: 'Asia',
data: [
{
x: 'Japan',
y: 61
},
{
x: 'India',
y: 55
}
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
}
};Pie
type="pie"Shares of one total, at a glance. Three or four slices; past that the angles stop being readable and a bar is kinder.
template
<Chart type="pie" :series="series" :options="options" :height="260" />script
const series = [
44,
30,
18,
8
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
},
labels: [
'Direct',
'Search',
'Social',
'Mail'
]
};Donut
type="donut"A pie with the middle free, which is where the total goes. The hole is what makes it worth using.
template
<Chart type="donut" :series="series" :options="options" :height="260" />script
const series = [
44,
30,
18,
8
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
},
labels: [
'Direct',
'Search',
'Social',
'Mail'
]
};Radar
type="radar"A profile across the same few measures, for comparing two or three subjects on shape rather than on level.
template
<Chart type="radar" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'This release',
data: [
80,
65,
90,
70,
85,
60
]
},
{
name: 'Last release',
data: [
65,
70,
72,
60,
75,
55
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
position: 'bottom'
},
labels: [
'Speed',
'Size',
'A11y',
'API',
'Docs',
'Tests'
]
};Funnel
type="funnel"Left and right arrow keys move between data points, up and down between series, Enter selects.
Stages of a process, each as wide as its share of the first. What it is read for is where the drop is, so the labels carry the percentages.
template
<Chart type="funnel" :series="series" :options="options" :height="260" />script
const series = [
{
name: 'Signups',
data: [
4820,
3100,
1740,
980,
610
]
}
];
const options = {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
labels: [
'Visited',
'Signed up',
'Activated',
'Subscribed',
'Renewed'
],
dataLabels: {
enabled: true,
formatter: '{value|compact} · {percent|percent:0}'
}
};Beyond the shapes
- Zoom and brush. Drag on the plot to zoom, or pair a chart with a brush chart that selects the window.
- Synced groups. Charts sharing a
groupmove their tooltip and their window together. - Themed by tokens. Colours, grid and type come from the same tokens as the components, light and dark.
- Without Vue.
@vitral/chartmounts into any element; the Vue component is a wrapper over it.