React-chartjs-2: TypeError: Cannot read property 'getBasePixel' of undefined

Created on 13 Dec 2018 · 5Comments · Source: reactchartjs/react-chartjs-2

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:

```javascript

    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>
    )

````

Source

flavz27

👍5

Most helpful comment

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',
    },
];

FlorianGG on 3 Apr 2019

👍13 ❤1

All 5 comments

Hi. Did you fix this issue? How?

CesarPantoja on 13 Mar 2019

Unfortunately I haven't fixed it, I just didn't implement this feature in the end

flavz27 on 13 Mar 2019

😕2 👍2

I can confirm I have the exact same issue today, on Chart.js v2.8.0 on vanilla JS (no react) without solution yet.

ohadch on 1 Apr 2019

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',
    },
];

FlorianGG on 3 Apr 2019

👍13 ❤1

Closing as not relevant to wrapper