How to set y axis value in vertical bar chart using chart JS
P粉729436537
2023-08-29 10:38:36
<p>In this vertical bar chart, the y-axis has positive and negative values. </p>
<p>I want to use positive integers above and below the zero value. </p>
<p>I am using version 4.2.1</p>
<p>What should I do? </p>
<p>Vertical chart example</p>
<pre class="brush:php;toolbar:false;">var MONTHS = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
var color = Chart.helpers.color;
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Dataset 1",
backgroundColor: 'rgba(255, 201, 14, 1)',
borderColor: 'rgba(255, 201, 14, 1)',
borderWidth: 1,
data: [
10,
20,
30,
40,
50
],
},
{
label: "Dataset 2",
backgroundColor: 'rgba(255, 201, 14, 1)',
borderColor: 'rgba(255, 201, 14, 1)',
borderWidth: 1,
data: [
-100,
-200,
-300,
-400,
-500
],
},
],
};
var ctx = bloodPressureChart;
new Chart(ctx, {
type: "bar",
data: barChartData,
options: {
responsive: true,
legend: {
position: "top",
},
title: {
display: true,
text: "Chart.js Bar Chart",
},
},
});</pre>
<p>This is my code using chart JS. </p>
<p>My Code Diagram</p>
If you only want to change the text of the y-axis labels, you can change them completely by setting the function
options.scales.y.ticks.callback
, see the documentation and API Reference for details. In your case, to make negative values read as positive, you can use:or