React-chartjs-2: Chart width and height not working

[tiagofumo]

I am testing this library to create a chart for an app. I saw the sample dataset below from this tutorial.

import React, { Component } from 'react'
import { Line } from 'react-chartjs-2'

class CurrencyChart extends Component {
  render() {
    const chartData = {
        labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
        datasets: [{
          label: 'apples',
          data: [12, 19, 3, 17, 6, 3, 7],
          backgroundColor: "rgba(153,255,51,0.6)"
        }, {
          label: 'oranges',
          data: [2, 29, 5, 5, 2, 3, 10],
          backgroundColor: "rgba(255,153,0,0.6)"
        }]
      }
    return (
      <Line data={chartData} width={600} height={250}></Line>
    )
  }
}

export default CurrencyChart

I added bootstrap and jquery from a cdn in the html file. This is the output (The buttons on the top come from the parent component):

I tried using the chart.js without the react-chartjs-2 package but it is either not being rendered or with no background color.

[gor181]

hey @tiagofumo ,

Have you tried with https://github.com/gor181/react-chartjs-2#custom-size ?

[tiagofumo]

@gor181 I think I tried that when I was trying permutations of configurations. I didn't try using it inside of a grid or a flexbox container to limit its size though, because when I used the chart.js library and created the chart with pure javascript it did resize but had no colors. I ended up using HighCharts inside of a Bootstrap grid and that worked for me for what I needed. Someone gave thumbs up in my comment, so I think this might be something that new users face frequently.

[gor181]

Yeh seems like a weird issue...

Usually people just wrap the component in a div setting the width/height and that does the trick.

[tiagofumo]

You might close this if you want, I don't know.

[amanjain325]

<div className="col-md-4"> <Line data={this.state.chartData} options={this.state.chartOptions} width={this.state.width} height={this.state.height} /> </div>

Insert a div having className is col-md-4

[nirajrajgor]

I think it's only happening with Line chart. I am using Pie chart and Line chart both. But, it is not working in Line chart.

[PavanKumarRao]

How to set defualt values, like instead of showing negative values in the axes, set default values to specific value?
Please reply back to [email protected]

[mjodeh]

you can see it in https://jerairrest.github.io/react-chartjs-2/ when you resize the window with the mouse look at the bar chart how its height just goes out of control!

[jamaldine]

hello, simply you add this in options:
data={state}
width={10}
height={5}
options={{maintainAspectRatio: false}}
/>

[5935512036]

how to i can hidden line table in background

[blarcmann]

@5935512036

scales: { xAxes: [{ gridLines: { display: false } }], yAxes: [{ gridLines: { display: false } }] }

[chandanahuja193]

Yeh seems like a weird issue...

Usually people just wrap the component in a div setting the width/height and that does the trick.

Hi Sorry for the date , Actually you didnot notice that your second label data is highest 29 but your yaxis highest value is 25.
So give the options add the highest value to your yaxis.
options: {
maintainAspectRatio: false,
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min:0,
max: 19,
stepSize:3
}
}]
}
}