Chart.js: TypeError: Cannot read property 'getBasePixel' of undefined...

Created on 12 Apr 2019 · 3Comments · Source: chartjs/Chart.js

Surely I am not encountering a bug, but rather having issues because of my lack of experience and knowledge. I'm trying to add a second axis to my charts (vue component + laravel), but I am getting this error when I add the yAxisID:

TypeError: Cannot read property 'getBasePixel' of undefined
    at ChartElement.updateElement (app.js:11279)
    at ChartElement.update (app.js:11251)
    at ChartElement.reset (app.js:9429)
    at app.js:15043
    at Object.each (app.js:8106)
    at Chart.update (app.js:15042)
    at Chart.construct (app.js:14769)
    at new Chart (app.js:14707)
    at VueComponent.mounted (app.js:1846)
    at invokeWithErrorHandling (app.js:71244)

This is my vue component:

<template>
    <canvas width="600" height="400" id="graph"></canvas>
</template>

<script>
    import Chart from 'chart.js';

    export default {

        props: ['labels','ranks','reviews'],

        mounted(){

            var data = {
                labels: this.labels,
                datasets: [
                    {
                        label: "Rank",
                        yAxisID: 'y-axis-1',
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: this.ranks
                    },{
                        label: "Reviews",
                        yAxisID: 'y-axis-2',
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: this.reviews
                    }
                ],

                options: {
                    scales: {
                        yAxes: [
                            {
                                id: 'y-axis-1',
                                type: "linear",
                                position: 'left',
                            }, {
                                id: 'y-axis-2',
                                type: "linear",
                                position: "right",
                        }]
                    }
                }
            };

            new Chart( this.$el.getContext('2d'), { type: "line", data: data });

        }

    }
</script>

Any tips, hints, thoughts, suggestions... are GREATLY appreciated.

support

Source