React-chartjs-2: `aspectRatio` property is not being observed

[tkeesling]

"chart.js": "^2.7.3",
"react-chartjs-2": "^2.7.4"

Chart components are not respecting the aspectRatio property within the options configuration.
Not setting default height and/or width on the canvas or its parent component.
The chart aspectRatio works in Codepen. https://codepen.io/anon/pen/ebaoVp?editors=0011

Options:

const options = {
    aspectRatio: 3,  // not being respected, still at `2`
    responsive: true,
    defaultFontColor: '#8a8989',
    defaultFontFamily: '\'Maax-Standard\', \'Helvetica\', \'Arial\', \'sans-serif\'',
    legend: {
      position: 'bottom',
      reverse: true,
    },
    scales: {
      yAxes: [
        {
          id: 'row-count-y-axis',
          type: 'linear',
          position: 'right',
          ticks: {
            beginAtZero: true,
            maxTicksLimit: 5,
          },
          scaleLabel: {
            display: true,
            fontSize: 14,
            labelString: 'Number of Rows',
          },
          gridLines: {
            display: false,
          },
        },
        {
          id: 'fill-rate-y-axis',
          type: 'linear',
          position: 'left',
          ticks: {
            beginAtZero: true,
            stepSize: 20,
            max: 100,
            callback: value => value + '%',
          },
          scaleLabel: {
            display: true,
            fontSize: 14,
            labelString: 'Overall Fill Rate',
          },
        },
      ],
    },
    animation: {
      duration: 2000,
      easing: 'easeInCubic',
    },
  };

[tkeesling]

I have figured out the issue. The default props for the html <canvas /> in the react-chartjs-2 package define a width and height (300 and 150, respectively). This effectively disables the aspectRatio property in the options.

Note that this option is ignored if the height is explicitly defined either as attribute or via the style.
https://www.chartjs.org/docs/latest/general/responsive.html

I believe this is to achieve an aspect ratio of 2:1 (w:h). The hack is to supply height={null} width={null} as props to the component.

for the future, I suggest we remove change the default props from providing height and width and replace with the options: { aspectRatio: 2 } as the default props to maintain all aspect ratios. I'll submit a PR.