TypeError: Cannot read property 'getBasePixel' of undefined

I’m getting an error trying to plot two datasets on a line chart with 2 different y-axis. If I specify the different Y axis, i get a TypeError: Cannot read property 'getBasePixel' of undefined error.

Here is the render method of my component:

        
        const data = {
            labels: [...labels],
            datasets: [
                {
                    label: 'Crimes',
                    fill: false,
                    lineTension: 0.5,
                    backgroundColor: 'rgba(75,192,192,0.4)',
                    borderColor: 'rgba(75,192,192,1)',
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: 'rgba(75,192,192,1)',
                    pointBackgroundColor: '#fff',
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: 'rgba(75,192,192,1)',
                    pointHoverBorderColor: 'rgba(220,220,220,1)',
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: crimeData,
                    yAxisID: 'y-axis-1'
                },
                {
                    label: 'Video games sales',
                    fill: false,
                    lineTension: 0.5,
                    backgroundColor: '#F95F62',
                    borderColor: '#F95F62',
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: '#F95F62',
                    pointBackgroundColor: '#fff',
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: '#F95F62',
                    pointHoverBorderColor: 'rgba(220,220,220,1)',
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: gameData,
                    yAxisID: 'y-axis-2'
                }
            ]
        };

        const options ={
            responsive: true,
            scales: {
                yAxes: [
                    {
                      type: 'linear',
                      display: true,
                      position: 'left',
                      id: 'y-axis-1',
                      gridLines: {
                        display: false
                      },
                      labels: {
                        show: true
                      }
                    },
                    {
                      type: 'linear',
                      display: true,
                      position: 'right',
                      id: 'y-axis-2',
                      gridLines: {
                        display: false
                      },
                      labels: {
                        show: true
                      }
                    }
                   ]
            }
        }

      
    
        return (
            <div className="chartsContainer">
                {this.props.selectedRegion}
                <div className="lineChart">
                    <Line data={data}
                     options={options}
                        width={50}
                        height={300}
                        options={{
                            maintainAspectRatio: false
                        }} />
                </div>

            </div>
        )

[FlorianGG]

I had the same issue but I forgot to add the key scales in the options object. And for your problem you have 2 props options in you Line component.

const options = {};
options.scales = {};
options.scales.yAxes = [
  {
        type: 'linear',
	display: true,
	position: 'left',
	id: 'y-axis-1',
    },
    {
	type: 'linear',
	display: true,
	position: 'right',
	id: 'y-axis-2',
    },
];

[Pringels]

Closing as not relevant to wrapper