React-chartjs-2: Smallest value is missing in Barchart

Created on 16 Mar 2018  路  3Comments  路  Source: reactchartjs/react-chartjs-2

        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, 56]
              }
            ]
        };    
        return (
            <div >
                <Bar data={data}
                    width={100}
                    height={70}           
                    options={{
                        maintainAspectRatio: true
                    }}
                />
            </div>
        );

and what I see is:
Screenshot from Gyazo

My guess is that it has something to do with the fact that my y-axis starts at 55 and not 0 like it should be.

Most helpful comment

Solved the issue by setting

                        scales: {
                            yAxes: [{
                                ticks: {
                                    min: 0,
                                }
                            }]
                        }

inside Bar options

All 3 comments

Solved the issue by setting

                        scales: {
                            yAxes: [{
                                ticks: {
                                    min: 0,
                                }
                            }]
                        }

inside Bar options

Thats kind of a tricky default option

@alphakennyn this solved my problem, thanks

this should be in the docs/examples

Was this page helpful?
0 / 5 - 0 ratings