I'm trying to make a bar chart using react-chart.js-2. I just noticed that all bar chart example start from the minimum number of the data, not 0.
The example below, the bar chart starts from 40, not 0. What I want to do is to make a bar chart starting from 0, not the minimum number of the data.
Is it possible to make it using react-chart.js2?
Here is the code(mostly code from the official example )
import React from 'react';
import {Bar} from 'react-chartjs-2';
import 'chartjs-plugin-datalabels';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
export default React.createClass({
displayName: 'BarExample',
render() {
return (
<div>
<h2>Bar Example (custom size)</h2>
<Bar
data={data}
width={150}
height={100}
/>
</div>
);
}
});
Here is a demo.
If the metrics use the same unit of measurement, select the Display metrics on one axis check box. The range for the metrics are displayed on the left axis. Optionally, select the Start left axis at 0 checkbox to start the axis range at zero. For horizontal bar charts, select the Start bottom axis at 0 check box.
When a bar chart does not start with a zero, the information you visualise can still remain correct but the people who'll see your bar chart will comprehend it in a wrong way. The difference between the values of the bars will either be too big or too small.
How do you start a zero in Chartjs? To start the y-axis scale start from 0 you can use the beginAtZero property of Chart. js as shown in the below example. Here we have used beginAtZero: true property of Chart.
The chart can also be programmatically resized by modifying the container size: chart.canvas.parentNode.style.height = '128px'; chart.canvas.parentNode.style.width = '128px'; Copied! Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false .
To start the y-axis from 0
, you would have to set the beginAtZero
property to true
for y-axis ticks, in your chart options, like so :
options={{
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}}
see - working demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With