3

How to Set Start Value as "0" in Chart.js ? - GeeksforGeeks

 4 months ago
source link: https://www.geeksforgeeks.org/how-to-set-start-value-as-0-in-chartjs/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

In this article, we are going to discuss how can we set 0 as a start value for any of the axes. we need to set 0 as a start value for a chart in Chart.js.

CDN Link:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

These are the following approaches for setting a 0 value as a start:

Approach 1: By Configuring Scales Options (Using beginAtZero)

In this approach, we Utilize the scale arrangement’s beginAtZero: genuine boundary. Regardless of what your information range is, this clear change ensures that the y-hub generally begins at 0.

Syntax:

 options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }

Example: This example shows the implementation of the above-explained approach.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" 
content="width=device-width, initial-scale=1.0">
<title>Chart.js Example 1</title>
<script src=
</script>
</head>
<body>
<canvas id="example1" width="300" height="100"></canvas>
<script>
let ctx1 = document.getElementById('example1').getContext('2d');
let chart1 = new Chart(ctx1, {
type: 'bar',
data: {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: 'My Dataset',
data: [5, 10, 15],
backgroundColor: ['rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>

Output:

Screenshot-2023-12-30-111105-(1)

Approach 2: By Custom Tick Callback

In this approach, we have defined a function to generate desired ticks that is 0.

Syntax:

 options: {
                scales: {
                    y: {
                        ticks: {
                            callback: function(value) {
                                return value >= 0 ? value : "";
                            }
                        }
                    }
                }

Example: This example shows the implementation of the above-explained approach.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" 
content="width=device-width, initial-scale=1.0">
<title>Chart.js Example 2</title>
<script src=
</script>
</head>
<body>
<canvas id="example2" width="400" height="200"></canvas>
<script>
let ctx2 = document.getElementById('example2').getContext('2d');
let chart2 = new Chart(ctx2, {
type: 'bar',
data: {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: 'My Dataset',
data: [5, 10, 15],
backgroundColor: ['rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
borderWidth: 1
}]
},
options: {
scales: {
y: {
ticks: {
callback: function (value) {
return value >= 0 ? value : "";
}
}
}
}
}
});
</script>
</body>
</html>

Output:

Screenshot-2023-12-30-111105-(1)

Approach 3: By using Minimum Property

In this approach, we are setting 0 to the minimum proerty of y in a scale configuration so that it starts with 0 only.

Syntax:

options: {
                scales: {
                    y: {
                        min: 0
                    }
                }
            }

Example: This example shows the implementation of the above-explained approach.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" 
content="width=device-width, initial-scale=1.0">
<title>Chart.js Example 3</title>
<script src=
</script>
</head>
<body>
<canvas id="example3" width="400" height="200"></canvas>
<script>
let ctx3 = document.getElementById('example3').getContext('2d');
let chart3 = new Chart(ctx3, {
type: 'bar',
data: {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: 'My Dataset',
data: [5, 10, 15],
backgroundColor: ['rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
borderWidth: 1
}]
},
options: {
scales: {
y: {
min: 0
}
}
}
});
</script>
</body>
</html>

Output:

Screenshot-2023-12-30-111105-(1)

Approch 4: By Axes Configuration

In this approach, we are setting the Axes configuration for y-axis. we are creating a function and setting the initial value as a 0.

Syntax:

options: {
                plugins: {
                    scales: {
                        y: {
                            beforeUpdate: function(scale) {
                                if (!scale.ticks.reverse) {
                                    scale.ticks.reverse = true;
                                    scale.ticks.push(0);
                                }
                            }
                        }
                    }
                }
            }

Example: This example shows the implementation of the above-explained approach.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" 
content="width=device-width, initial-scale=1.0">
<title>Chart.js Example 4</title>
<script src=
</script>
</head>
<body>
<canvas id="example4" width="400" height="200"></canvas>
<script>
let ctx4 = document.getElementById('example4').getContext('2d');
let chart4 = new Chart(ctx4, {
type: 'bar',
data: {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: 'My Dataset',
data: [5, 10, 15],
backgroundColor: ['rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
borderWidth: 1
}]
},
options: {
plugins: {
scales: {
y: {
beforeUpdate: function (scale) {
if (!scale.ticks.reverse) {
scale.ticks.reverse = true;
scale.ticks.push(0);
}
}
}
}
}
}
});
</script>
</body>
</html>

Output:

Screenshot-2023-12-30-111105-(1)

Value set as “0”

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Commit to GfG's Three-90 Challenge! Purchase a course, complete 90% in 90 days, and save 90% cost click here to explore.

Last Updated : 03 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK