Displaying Charts in JavaScript with Chart.js
Want to draw charts with JavaScript but not sure which library to use?
This article explains in detail how to easily create line charts and radar charts using Chart.js.
With Chart.js (https://www.chartjs.org/), you can render charts on a Canvas element directly in the browser.
Since we’ll be using a CDN, make sure to include the following script tag.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
You also need to place a canvas tag inside the body tag to display the chart.
If you want the chart to be responsive, place it inside a parent container and set the container’s width and height as needed.
For bar charts and line charts, the recommended aspect ratio is generally width : height = 2 : 1.
For radar charts, the aspect ratio is typically width : height = 1 : 1.
<div style="position:relative;height:calc(calc(100vw - 16px) / 2);width:calc(100vw - 16px);max-height:400px;max-width:800px;box-sizing:border-box;">
<canvas id="myChart"></canvas>
</div>
Bar Chart
Source Code
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div style="position:relative;height:calc(calc(100vw - 16px) / 2);width:calc(100vw - 16px);max-height:400px;max-width:800px;box-sizing:border-box;"> <canvas id="myChart"></canvas> </div> <script> //Get the canvas element where the chart will be displayed new Chart(document.getElementById('myChart'), { type: 'bar', data:{ labels: ['A', 'B', 'C'], // Labels for each bar datasets: [ { label: 'FY2022 Performance', data: [12, 19, 3], // Data for the bar chart borderWidth: 1, // Border width of the bars yAxisID: 'yAxis', // ID of the Y-axis to use }, { label: 'FY2023 Performance', data: [10, 15, 10], // Data for the bar chart borderWidth: 4, // Border width of the bars yAxisID: 'yAxis', // ID of the Y-axis to use }, { label: 'Average', data: [11, 17, 6.5], type: 'scatter', showLine: true, yAxisID: 'yAxis', // ID of the Y-axis to use }, ] }, options:{ responsive: true, maintainAspectRatio: true, animation: true, // Enable animation scales: { yAxis:{ // Y-axis ID min: 0, max: 20, // Minimum and maximum values for the Y-axis title:{ display: true, // Display axis label align: 'center', // Center the axis label text: 'Million Yen', // Text for the axis label }, }, }, plugins: { title: { display: true, text: 'Performance (Title)', } } }, }); </script>
Line Chart
Source Code
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div style="position:relative;height:calc(calc(100vw - 16px) / 2);width:calc(100vw - 16px);max-height:600px;max-width:600px;box-sizing:border-box;">
<canvas id="myChart2"></canvas>
</div>
<script>
// Get the canvas element where the chart will be displayed
new Chart(document.getElementById('myChart2'), {
type: 'line',
data:{
labels: ['Jul 2022', 'Aug 2022', 'Sep 2022', 'Oct 2022', 'Nov 2022', 'Dec 2022'], // Labels
datasets: [
{
label: 'A',
data: [6,4,5,9,14,10], // Data for the line chart
borderWidth: 1, // Line thickness
yAxisID: 'yAxis', // ID of the Y-axis to use
pointStyle:'circle', // Shape of the data points
pointRadius:5, // Size of the data points
},
{
label: 'B',
data: [8,12,14,14,18,14], // Data for the line chart
borderWidth: 2, // Line thickness
yAxisID: 'yAxis', // ID of the Y-axis to use
pointStyle:'rectRot', // Shape of the data points
pointRadius:5, // Size of the data points
},
{
label:'C',
data:[10,8,6,5,12,8], // Data for the line chart
borderWidth: 4, // Line thickness
yAxisID: 'yAxis', // ID of the Y-axis to use
pointStyle:'triangle', // Shape of the data points
pointRadius:5, // Size of the data points
},
]
},
options:{
responsive: true,
maintainAspectRatio:true,
animation:true, // Enable animation
scales: {
yAxis:{ // Y-axis ID
min:0, max:20, // Minimum and maximum values for the Y-axis
title:{
display:true, // Display the axis label
align:'center', // Center the axis label
text:'Million Yen', // Text for the axis label
},
},
},
plugins: {
title: {
display: true,
text: 'Performance (Title)',
}
}
},
});
</script>
Radar Chart
Source Code
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div style="position:relative;height:calc(100vw - 16px);width:calc(100vw - 16px);max-height:600px;max-width:600px;box-sizing:border-box;">
<canvas id="myChart3"></canvas>
</div>
<script>
// Get the canvas element where the chart will be displayed
new Chart(document.getElementById('myChart3'), {
type: 'radar',
data:{
labels: [ // Labels
'Single-thread Performance', 'Multi-thread Performance',
'Overall CPU Performance', 'GPU Performance', 'Business Performance',
'Video Editing', 'Gaming Performance',
],
datasets: [
{ // First radar chart
label: 'Company I CPU (with AVX2) + Company n GPU',
data: [8.7, 10.0, 9.4, 8.6, 8.6, 8.6, 8.2], // Radar chart data
borderWidth: 1, // Line thickness
pointStyle:'circle', // Shape of data points
pointRadius:5, // Size of data points
fill: true,
backgroundColor: 'rgba(100, 128, 255, 0.2)', // Set transparency to 0.2
},
{ // Second radar chart
label: 'Company A CPU',
data: [9.0, 6.5, 7.2, 4.0, 5.0, 7.0, 3.0], // Radar chart data
borderWidth: 2, // Line thickness
pointStyle:'rectRot', // Shape of data points
pointRadius:5, // Size of data points
fill: true,
backgroundColor: 'rgba(255, 128, 100, 0.4)', // Set transparency to 0.4
},
]
},
options:{
responsive: true,
maintainAspectRatio:true,
animation:true, // Enable animation
scales: {
r:{ // Axis
min:0, max:10, // Minimum and maximum values
ticks: {
stepSize: 2 // Tick interval
},
pointLabels:{
font:{
size:14,
},
},
},
},
plugins: {
title: {
display: true,
text: 'AI‑Evaluated CPU (with AVX) + GPU Performance for PCs in the ¥150,000–¥250,000 Range',
font:{
size:19,
},
},
legend:{
display:true,
labels:{
font:{
size:17,
},
},
},
},
},
});
</script>