Chart width and height not working

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.

[jamaldine]

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

[gor181]

hey @tiagofumo ,

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