ChartJS cheatsheet
Ming Sun / December 02, 2022
27 min read • ––– views
Line chart - x axis is for labeling
LineChart
<LineChart data={{
labels: ["TI", "ADI", "Renesas", "Qualcomm", "Apple", "Huawei", "Cirrus"],
datasets: [
{
label: "Dataset 1",
data: [2,4,6,4*2,5*2,6*2,14],
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
},
{
label: "Dataset 2",
data: [1,2,3,4,5,6,7],
borderColor: "rgb(53, 162, 235)",
backgroundColor: "rgba(53, 162, 235, 0.5)",
},
],
}}
options={{
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "Chart.js Line Chart Example",
},
},
scales: {
x: {
display: true,
},
y: {
display: true,
}
}
}}
/>
Line chart - xy plot
Linechart
<LineChart data={{
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets: [
{
label: "Sine wave",
data: [Math.sin(0), Math.sin(1/10*Math.PI*2), Math.sin(2/10*Math.PI*2), Math.sin(3/10*Math.PI*2), Math.sin(4/10*Math.PI*2), Math.sin(5/10*Math.PI*2), Math.sin(6/10*Math.PI*2), Math.sin(7/10*Math.PI*2), Math.sin(8/10*Math.PI*2), Math.sin(9/10*Math.PI*2), Math.sin(10/10*Math.PI*2)],
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
borderWidth: 1,
borderDash: [5,2],
tension: 0.3
},
{
label: "Cosine wave",
data: [Math.cos(0), Math.cos(1/10*Math.PI*2), Math.cos(2/10*Math.PI*2), Math.cos(3/10*Math.PI*2), Math.cos(4/10*Math.PI*2), Math.cos(5/10*Math.PI*2), Math.cos(6/10*Math.PI*2), Math.cos(7/10*Math.PI*2), Math.cos(8/10*Math.PI*2), Math.cos(9/10*Math.PI*2), Math.cos(10/10*Math.PI*2)],
borderColor: "rgb(53, 162, 235)",
backgroundColor: "rgba(53, 162, 235, 0.5)",
borderWidth: 2,
tension: 0.3
},
],
}}
options={{
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "xy plot",
},
},
scales: {
x: {
display: true,
title: {
display: true,
text: 'Time [µs]',
font: { size: 12, weight: "bold" },
}
},
y: {
display: true,
max: 1.5,
min: -1.5,
title: {
display: true,
text: 'Voltage [V]',
font: { size: 12, weight: "bold" },
}
},
}
}}
/>
Line chart - multiaxis line chart
multiaxis
<LineChart data={{
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets: [
{
label: "Sine wave",
data: [Math.sin(0), Math.sin(1/10*Math.PI*2), Math.sin(2/10*Math.PI*2), Math.sin(3/10*Math.PI*2), Math.sin(4/10*Math.PI*2), Math.sin(5/10*Math.PI*2), Math.sin(6/10*Math.PI*2), Math.sin(7/10*Math.PI*2), Math.sin(8/10*Math.PI*2), Math.sin(9/10*Math.PI*2), Math.sin(10/10*Math.PI*2)],
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
borderWidth: 1,
borderDash: [5,2],
tension: 0.3,
yAxisID: 'y',
},
{
label: "Cosine wave",
data: [2*Math.cos(0), 2*Math.cos(1/10*Math.PI*2), 2*Math.cos(2/10*Math.PI*2), 2*Math.cos(3/10*Math.PI*2), 2*Math.cos(4/10*Math.PI*2), 2*Math.cos(5/10*Math.PI*2), 2*Math.cos(6/10*Math.PI*2), 2*Math.cos(7/10*Math.PI*2), 2*Math.cos(8/10*Math.PI*2), 2*Math.cos(9/10*Math.PI*2), 2*Math.cos(10/10*Math.PI*2)],
borderColor: "rgb(53, 162, 235)",
backgroundColor: "rgba(53, 162, 235, 0.5)",
borderWidth: 2,
tension: 0.3,
yAxisID: 'y1',
},
],
}}
options={{
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "Multiaxis line chart",
font: {size: 15}
},
},
scales: {
x: {
display: true,
title: {
display: true,
text: 'Time [µs]',
font: { size: 12, weight: "bold" },
}
},
y: {
display: true,
max: 1.5,
min: -1.5,
position: 'left',
title: {
display: true,
text: 'Voltage [V]',
font: { size: 12, weight: "bold" },
}
},
y1: {
display: true,
max: 3,
min: -3,
ticks: {
stepSize: 1
},
position: 'right',
title: {
display: true,
text: 'Current [µA]',
font: { size: 12, weight: "bold" },
},
grid: {
drawOnChartArea: false,
},
}
}
}}
/>
Stepped plot
stepped_plot
<LineChart data={{
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets: [
{
label: "Signal",
data: [Math.sin(0), Math.sin(1/10*Math.PI*2), Math.sin(2/10*Math.PI*2), Math.sin(3/10*Math.PI*2), Math.sin(4/10*Math.PI*2), Math.sin(5/10*Math.PI*2), Math.sin(6/10*Math.PI*2), Math.sin(7/10*Math.PI*2), Math.sin(8/10*Math.PI*2), Math.sin(9/10*Math.PI*2), Math.sin(10/10*Math.PI*2)],
borderColor: "rgb(53, 162, 235)",
backgroundColor: "rgba(53, 162, 235, 0.5)",
borderWidth: 2,
tension: 0.3
},
{
label: "Sampled",
data: [Math.sin(0), Math.sin(1/10*Math.PI*2), Math.sin(2/10*Math.PI*2), Math.sin(3/10*Math.PI*2), Math.sin(4/10*Math.PI*2), Math.sin(5/10*Math.PI*2), Math.sin(6/10*Math.PI*2), Math.sin(7/10*Math.PI*2), Math.sin(8/10*Math.PI*2), Math.sin(9/10*Math.PI*2), Math.sin(10/10*Math.PI*2)],
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
borderWidth: 1,
borderDash: [5,2],
stepped: true,
pointRadius: 0
},
],
}}
options={{
responsive: true,
aspectRatio: 1.5,
plugins: {
tooltip: {
enabled: false
},
legend: {
position: "top",
},
title: {
display: true,
text: "stepped plot",
font: {size: 15}
},
},
scales: {
x: {
display: true,
title: {
display: true,
text: 'Time [µs]',
font: { size: 12, weight: "bold" },
}
},
y: {
display: true,
max: 1.5,
min: -1.5,
title: {
display: true,
text: 'Voltage [V]',
font: { size: 12, weight: "bold" },
}
},
}
}}
/>
Logscale plot
logscale
<LineChart data={{
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets: [
{
label: "Signal",
data: [Math.sin(0), Math.sin(1/10*Math.PI*2), Math.sin(2/10*Math.PI*2), Math.sin(3/10*Math.PI*2), Math.sin(4/10*Math.PI*2), Math.sin(5/10*Math.PI*2), Math.sin(6/10*Math.PI*2), Math.sin(7/10*Math.PI*2), Math.sin(8/10*Math.PI*2), Math.sin(9/10*Math.PI*2), Math.sin(10/10*Math.PI*2)],
borderColor: "rgb(53, 162, 235)",
backgroundColor: "rgba(53, 162, 235, 0.5)",
borderWidth: 2,
tension: 0.3
},
{
label: "Sampled",
data: [Math.sin(0), Math.sin(1/10*Math.PI*2), Math.sin(2/10*Math.PI*2), Math.sin(3/10*Math.PI*2), Math.sin(4/10*Math.PI*2), Math.sin(5/10*Math.PI*2), Math.sin(6/10*Math.PI*2), Math.sin(7/10*Math.PI*2), Math.sin(8/10*Math.PI*2), Math.sin(9/10*Math.PI*2), Math.sin(10/10*Math.PI*2)],
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
borderWidth: 1,
borderDash: [5,2],
stepped: true,
pointRadius: 0
},
],
}}
options={{
responsive: true,
aspectRatio: 1.5,
plugins: {
tooltip: {
enabled: false
},
legend: {
position: "top",
},
title: {
display: true,
text: "Logscale plot",
font: {size: 15}
},
},
scales: {
x: {
display: true,
type: 'logarithmic',
title: {
display: true,
text: 'Time [µs]',
font: { size: 12, weight: "bold" },
}
},
y: {
display: true,
max: 1.5,
min: -1.5,
title: {
display: true,
text: 'Voltage [V]',
font: { size: 12, weight: "bold" },
}
},
}
}}
/>
Scatter plot
scatter_plot
<ScatterChart
data={{
datasets: [
{
label: "Cosine wave",
data: [{x:1,y:1},{x:2,y:4}, {x:2,y:6}],
borderColor: "rgb(53, 162, 235)",
backgroundColor: "rgba(53, 162, 235, 0.5)",
borderWidth: 2,
tension: 0,
pointRadius: 0,
showLine: true,
},
],
}}
options={{
responsive: true,
interaction: {
intersect: false,
mode: "x",
},
plugins: {
legend: {
position: "top",
display: false,
},
title: {
display: false,
text: "xy plot",
},
},
scales: {
x: {
display: true,
ticks: {
maxTicksLimit: 11,
},
title: {
display: true,
text: "Duty cycle [%]",
font: { size: 12, weight: "bold" },
},
},
y: {
display: true,
title: {
display: true,
text: "VOUT [V]",
font: { size: 12, weight: "bold" },
},
},
},
}}
/>
References and materials
[1] Line chart example with react-chartjs-2