Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to set up 0 as a minimum number for bar chart? react-chart.js-2

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.

enter image description here

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.

like image 618
aaayumi Avatar asked Sep 28 '17 13:09

aaayumi


People also ask

How do you start a bar chart with zeros?

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.

Can you start a bar graph not at 0?

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?

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.

How do I make ChartJS smaller?

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 .


1 Answers

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

like image 177
ɢʀᴜɴᴛ Avatar answered Oct 15 '22 21:10

ɢʀᴜɴᴛ