How to Dynamically Update Values of a Chart in ChartJS ?
Chart.js is an open-source free JavaScript library that is used to visualize data-informed charts. Dynamic chart updates are useful in creating interactive and real-time data visualizations. In this article, we will learn about how to dynamically update the values of charts.
Using update() method
Chart.js provides an update method, which is used to update the entire chart object. To update the chart dynamically, we can create a function encapsulating the necessary updates by using the chart object. In a last, we will call a chartName.update() method to update the chart.
Syntax:
//Updating chart on function call with update() method
function UpdateChart() {
let newData = [30, 40, 10, 50, 20];
//Changing Chart object data
BarChart.data.datasets[0].data = newData;
//Updating the chart
BarChart.update();
}
Example 1: The below example demonstrating dynamically updating values of a chart every 2 seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Pie Chart Example</title>
<!-- Include Chart.js library -->
<script src="
https://cdn.jsdelivr.net/npm/chart.js">
</script>
<style>
div {
height: 50vh;
width: 50vw;
}
</style>
</head>
<body>
<h1>w3wiki | Dynamically Update Pie Chart</h1>
<div>
<!-- Create a canvas element to render the chart -->
<canvas id="pieChart" width="400" height="400">
</canvas>
</div>
<script>
// Get the 2D rendering context of the canvas
let ctx = document
.getElementById('pieChart')
.getContext('2d');
// Create a new Pie Chart
let pieChart = new Chart(ctx, {
// Specify the chart type
type: 'radar',
// Provide data for the chart
data: {
// Labels for each segment of the pie
labels: ['JavaScript',
'Python',
'Java',
'C++',
'PHP'],
// Datasets for the chart
datasets: [{
data: [40, 35, 25, 17, 18],
// Data points for each segment
backgroundColor: ['rgba(255, 99, 132, 0.8)',
'rgba(75, 192, 192, 0.8)',
'rgba(54, 162, 235, 0.8)',
'rgba(255, 205, 86, 0.8)',
'rgba(153, 102, 255, 0.8)'],
borderWidth: 2 // Border width for each segment
}]
},
// Additional options for the chart
options: {
responsive: true, //It make the chart responsive
//This plugin will display Title of chart
plugins: {
title: {
display: true,
text: 'Number of Students Enrolled Course'
}
}
}
});
// Dynamically update the chart after every 2 seconds
setInterval(function () {
//Creating a array with 5 random value
let updatedData = Array(5).fill().map(getRandomValue);
//Update the chart object
pieChart.data.datasets[0].data = updatedData;
//Update the chart
pieChart.update();
}, 2000);
//This function will return Random value
const getRandomValue = () => {
return Math.floor(Math.random() * 100)
}
</script>
</body>
</html>
Output:
Example 2: The below radar chat demonstrating dynamically updating values of a chart every 2 seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Pie Chart Example</title>
<!-- Include Chart.js library -->
<script src="
https://cdn.jsdelivr.net/npm/chart.js">
</script>
<style>
div {
height: 50vh;
width: 50vw;
}
</style>
</head>
<body>
<h1>w3wiki | Dynamically Update Pie Chart</h1>
<div>
<!-- Create a canvas element to render the chart -->
<canvas id="pieChart" width="400" height="400">
</canvas>
</div>
<script>
// Get the 2D rendering context of the canvas
let ctx = document
.getElementById('pieChart')
.getContext('2d');
// Create a new Pie Chart
let pieChart = new Chart(ctx, {
// Specify the chart type
type: 'radar',
// Provide data for the chart
data: {
// Labels for each segment of the pie
labels: ['JavaScript',
'Python',
'Java',
'C++',
'PHP'],
// Datasets for the chart
datasets: [{
data: [40, 35, 25, 17, 18],
// Data points for each segment
backgroundColor: ['rgba(255, 99, 132, 0.8)',
'rgba(75, 192, 192, 0.8)',
'rgba(54, 162, 235, 0.8)',
'rgba(255, 205, 86, 0.8)',
'rgba(153, 102, 255, 0.8)'],
borderWidth: 2 // Border width for each segment
}]
},
// Additional options for the chart
options: {
responsive: true, //It make the chart responsive
//This plugin will display Title of chart
plugins: {
title: {
display: true,
text: 'Number of Students Enrolled Course'
}
}
}
});
// Dynamically update the chart after every 2 seconds
setInterval(function () {
//Creating a array with 5 random value
let updatedData = Array(5).fill().map(getRandomValue);
//Update the chart object
pieChart.data.datasets[0].data = updatedData;
//Update the chart
pieChart.update();
}, 2000);
//This function will return Random value
const getRandomValue = () => {
return Math.floor(Math.random() * 100)
}
</script>
</body>
</html>
Output:
Example 3: The below line chart demonstrating dynamically updating values of a chart every 2 seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Pie Chart Example</title>
<!-- Include Chart.js library -->
<script src="
https://cdn.jsdelivr.net/npm/chart.js">
</script>
<style>
div {
height: 50vh;
width: 50vw;
}
</style>
</head>
<body>
<h1>w3wiki | Dynamically Update Radar Chart</h1>
<div>
<!-- Create a canvas element to render the chart -->
<canvas id="pieChart" width="400" height="400">
</canvas>
</div>
<script>
// Get the 2D rendering context of the canvas
let ctx = document
.getElementById('pieChart')
.getContext('2d');
// Create a new Pie Chart
let pieChart = new Chart(ctx, {
// Specify the chart type
type: 'line',
// Provide data for the chart
data: {
// Labels for each segment of the pie
labels: ['JavaScript',
'Python',
'Java',
'C++',
'PHP'],
// Datasets for the chart
datasets: [{
data: [40, 35, 25, 17, 18],
// Data points for each segment
backgroundColor: ['rgba(255, 99, 132, 0.8)',
'rgba(75, 192, 192, 0.8)',
'rgba(54, 162, 235, 0.8)',
'rgba(255, 205, 86, 0.8)',
'rgba(153, 102, 255, 0.8)'],
borderWidth: 2 // Border width for each segment
}]
},
// Additional options for the chart
options: {
responsive: true, //It make the chart responsive
//This plugin will display Title of chart
plugins: {
title: {
display: true,
text: 'Number of Students Enrolled Course'
}
}
}
});
// Dynamically update the chart after every 2 seconds
setInterval(function () {
//Creating a array with 5 random value
let updatedData = Array(5).fill().map(getRandomValue);
//Update the chart object
pieChart.data.datasets[0].data = updatedData;
//Update the chart
pieChart.update();
}, 2000);
//This function will return Random value
const getRandomValue = () => {
return Math.floor(Math.random() * 100)
}
</script>
</body>
</html>
Output: