Line
type="line"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
Um valor enquanto se move. O primeiro gráfico a que recorrer, e aquele que o leitor nunca precisa aprender a ler.
Gráficos
29 gráficos, desenhados sem nenhuma dependência
Um motor SVG, sem biblioteca de plotagem por baixo, guiado pelo objeto de opções que o ApexCharts tornou familiar. Tudo o que é visual é dado puro, então sobrevive a JSON e uma tela de configurações pode escrevê-lo. Cada gráfico recebe um nome a partir de um resumo gerado com os próprios dados, e sua área de plotagem recebe foco: as setas do teclado o leem ponto a ponto.
Ao longo do tempo
Line, several series
type="line"Duas ou três linhas comparam formas. Passando de quatro, o gráfico vira um nó e pequenos múltiplos se leem melhor.
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"Um total ao longo do tempo, e do que ele é feito. Empilhado, a borda de cima é o total; sem empilhar, os preenchimentos se sobrepõem e enganam.
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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
A faixa entre um mínimo e um máximo, mês a mês: a margem de uma previsão, ou a variação do dia. Um preenchimento, duas bordas.
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"Uma área empilhada flutuando sobre uma linha de base própria. As faixas dividem o movimento em vez de a de baixo carregá-lo sozinha, e é isso que torna a forma legível.
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"Duas marcas num só gráfico: a quantidade em barras, a taxa em linha, cada uma em seu próprio eixo. Cada série diz a marca que quer.
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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
Quatro números por período: abertura, máxima, mínima e fechamento. Cada ponto é uma tupla, nessa ordem.
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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
Um ano de dias como uma grade de semanas. Uma linha de 365 pontos mostra a tendência; este mostra o dia, que é o que se procura num registro de atividade diária.
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)'
]
};Comparação
Bar, grouped
type="bar"Quantidades lado a lado. A linha de base tem de ser zero: uma barra diz o tamanho, e um eixo cortado mente sobre ele.
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"O total por categoria, dividido. Só a faixa de baixo é fácil de comparar entre categorias — ponha ali a série que importa.
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"Proporções em vez de quantidades: toda barra é cheia, então a composição fica comparável e o tamanho some.
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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
Nomes de categoria longos, ou muitos deles: os rótulos ganham o espaço de que precisam e ficam na horizontal.
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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
Uma barra sem a tinta. A mesma comparação por uma fração do peso, para uma página com muitas delas.
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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
Como um número foi de um total a outro. Cada barra começa onde a anterior parou; uma barra de total volta ao 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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
Uma barra entre dois números em vez de subir a partir do zero. Cada ponto é `[low, high]`, então se lê como um intervalo e não como uma quantidade.
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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
Uma medida, sua meta e as faixas em que cai: o trabalho de um medidor numa tira que cabe numa linha de tabela. O traço é a meta; as faixas são ruim, razoável e bom.
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
}
]
}
}
};Distribuição
Scatter
type="scatter"Duas medidas uma contra a outra, um ponto por item. O que importa é a forma da nuvem, não um ponto qualquer.
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"Uma dispersão com um terceiro número como área. Área, não raio: dobrar o raio desenharia quatro vezes a quantidade.
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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
Uma grade em que a cor é o valor: duas categorias entram, uma medida sai. Bom para uma semana por hora.
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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
Leituras brutas entram, contagens saem: o próprio gráfico calcula as faixas. Passe uma lista simples de números, não categorias.
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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
Cinco números por categoria — mínimo, quartis, mediana, máximo — para que duas distribuições se comparem sem que nenhuma se perca numa média.
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'
}
}
};Partes de um todo
Treemap
type="treemap"Partes de um total como áreas em vez de ângulos. Cabem muito mais partes do que numa pizza, e as caixas são dispostas de forma quadrada para que nenhuma vire uma lasca.
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"Um anel por medida, dando a volta até onde vai sua parte do máximo. Três ou quatro de cada vez: cada um se lê contra o próprio trilho, não contra os outros.
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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
Um número contra o seu máximo, com a leitura no meio. O arco deixa a parte de baixo aberta, e é isso que o distingue de um anel à primeira vista.
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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
Uma pizza de vários anéis, um por nível de uma árvore. Responde o que uma pizza não consegue — do que uma fatia é feita — sem sair do círculo.
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"Partes de um único total, num relance. Três ou quatro fatias; passando disso os ângulos deixam de ser legíveis e uma barra é mais gentil.
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"Uma pizza com o meio livre, que é onde vai o total. O furo é o que faz valer a pena usá-la.
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"Um perfil sobre as mesmas poucas medidas, para comparar dois ou três objetos pela forma e não pelo nível.
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"As setas para a esquerda e a direita movem entre os pontos, para cima e para baixo entre as séries, Enter seleciona.
As etapas de um processo, cada uma tão larga quanto sua parte da primeira. O que se procura nele é onde está a queda, por isso os rótulos trazem as porcentagens.
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}'
}
};Além das formas
- Zoom e seleção. Arraste sobre o gráfico para dar zoom, ou combine um gráfico com um gráfico de seleção que escolhe a janela.
- Grupos sincronizados. Gráficos que compartilham um
groupmovem o tooltip e a janela juntos. - Tema por tokens. Cores, grade e tipografia vêm dos mesmos tokens dos componentes, no claro e no escuro.
- Sem Vue.
@vitral/chartse monta em qualquer elemento; o componente Vue é uma camada sobre ele.