Get 2Lakh Prize Money
If you solve Easyalgo DSA sheet then you can get a chance to get a prize of Rs. 2 lakhs, you have to solve only 350 questions.!
March 9, 2024, 5:44 a.m.
Below are the approaches to set the Chart.js Y-axis title:
Table of Content
Div : table_of_content
options: { scales: { yAxes: [{ ticks: { callback: function(value, index, values) { // formating code } } }] } }
Example: The below code uses a callback function to format the labels of Y-axis.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Formatted Y-axis Labels</title>
<script src=
"https://cdn.jsdelivr.net/npm/chart.js">
</script>
</head>
<style>
div {
height: 400px;
width: 400px;
}
</style>
<body>
<h1>
GeeksForGeeks |
</h1>
<p>
<b>
format the labels of the Y
axis in a chart?
</b>
</p>
<div>
<canvas id="myChart" width="400"
height="400">
</canvas>
</div>
<script>
const ctx =
document.getElementById('myChart').
getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels:
['January', 'February',
'March', 'April', 'May'],
datasets: [{
label: 'Sales',
data:
[1000, 1500, 1200,
1800, 2000],
backgroundColor:
'rgba(54, 162, 235, 0.5)',
borderColor:
'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
callback:
function (value, index, values) {
return '$' +
value.toLocaleString();
}
}
}]
}
}
});
</script>
</body>
</html>
Output:
You can use the Intl.NumberFormat object for number formatting. Here's how you can integrate it:
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
Example: The below code uses intl.NumberFormat() method to format the labels of Y-axis.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Formatted Y-axis Labels
</title>
<script src=
"https://cdn.jsdelivr.net/npm/chart.js">
</script>
</head>
<style>
div {
height: 400px;
width: 400px;
}
</style>
<body>
<h1>
GeeksForGeeks |
</h1>
<p>
<b>
format the labels of the Y
axis in a chart?
</b>
</p>
<div>
<canvas id="myChart" width="400"
height="400">
</canvas>
</div>
<script>
const ctx =
document.getElementById('myChart').
getContext('2d');
const formatter =
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels:
['January', 'February',
'March', 'April', 'May'],
datasets: [{
label: 'Sales',
data:
[1000, 1500, 1200, 1800, 2000],
backgroundColor:
'rgba(54, 162, 235, 0.5)',
borderColor:
'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
callback:
function (value, index, values) {
return formatter.format(value);
}
}
}]
}
}
});
</script>
</body>
</html>
Output:
Chart.plugins.register({ beforeRender: function(chart) { const yAxis = chart.scales['y-axis-0']; yAxis.options.ticks.callback = function(value, index, values) { return '$' + value.toLocaleString(); // Format as currency }; } });
Example: The below code explains the use of custom plugin to format the labels of Y-axis.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Formatted Y-axis Labels
</title>
<script src=
"https://cdn.jsdelivr.net/npm/chart.js">
</script>
</head>
<style>
div {
height: 400px;
width: 400px;
}
</style>
<body>
<h1>
GeeksForGeeks |
</h1>
<p>
<b>
format the labels of the Y
axis in a chart?
</b>
</p>
<div>
<canvas id="myChart" width="400"
height="400">
</canvas>
</div>
<script>
const ctx =
document.getElementById('myChart').
getContext('2d');
Chart.plugins.register({
beforeRender: function (chart) {
var yAxis = chart.scales['y-axis-0'];
yAxis.options.ticks.callback =
function (value, index, values) {
return '$' + value.toLocaleString();
};
}
});
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels:
['January', 'February',
'March', 'April', 'May'],
datasets: [{
label: 'Sales',
data:
[1000, 1500, 1200, 1800, 2000],
backgroundColor:
'rgba(54, 162, 235, 0.5)',
borderColor:
'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
}
});
</script>
</body>
</html>
If you solve Easyalgo DSA sheet then you can get a chance to get a prize of Rs. 2 lakhs, you have to solve only 350 questions.!
If you solve Easyalgo DSA sheet then you can get a chance to get a prize of Rs. 2 lakhs, you have to solve only 350 questions.!
Copyright © EasyAlgo All Rights Reserved
Comments
No comments yet...
Add Comment