[Bug]: Vue-ChartJS keeps throwing [Vue warn]: Error in mounted hook: "RangeError: Maximum call stack size exceeded" keeps showing

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Every time I include a chart in a page I keep getting this in the console: [Vue warn]: Error in mounted hook: “RangeError: Maximum call stack size exceeded”.

The chart loads and acts as expected but I keep getting this warning.

I am using vue-chartjs v4.0.7 with chart.js v3.7.1 in Vue 2.6.14.

The usage of the component is basic. I include it in another component like this:

<StatisticsGraph :statisticsGraph="statisticsGraph" style="max-height:490px; width:100%;"/>

statisticsGraph is just a data() field that gets updated after an axios call. I have checked and it only gets called twice.

And then the component looks like this:

<template>
    <LineChart :chart-data="chartData" :chart-options="chartOptions"/>
</template>
<script>
    import 'chart.js/auto';
    import { Line } from 'vue-chartjs/legacy';

    export default{
        components: {LineChart: Line},
        props: {
            statisticsGraph: Object
        },
        data: function(){
            var labels = [
                        'Monday','Monday-end','Friday','Friday-end'];
             return {
                chartData: {
                    labels: labels,
                    datasets: [
                        {   
                            type: 'line',
                            steppedLine: true,
                            data: this.statisticsGraph.last_week,
                            borderColor: '#d0d7e1',
                            pointRadius: 0,
                            borderWidth: 2,
                            fill: false,
                        },
                        {
                            type:'line',
                            steppedLine: true,
                            data: this.statisticsGraph.this_week,
                            borderColor: '#77c0b4',
                            backgroundColor: '#77c0b4',
                            pointRadius: 0,
                            borderWidth: 2,
                            fill: false,
                        },
                    ]
                },
                chartOptions: {
                    plugins: {
                        legend: {
                            display: false,
                            labels: {
                                boxWidth: 20,
                            }
                        },
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false,
                            },
                            ticks: {
                                padding: 10,
                                fontColor: '#95AAC9',
                                fontSize: 13,
                                autoSkip: false,
                                maxRotation: 0,
                                callback: (value) => {return (labels[value] === 'Monday' ||  labels[value] === 'Friday') ? labels[value] : ' '}
                            },
                        },
                        y: {
                            grid: {
                                drawBorder: false,
                            },
                            ticks: {
                                fontColor: '#95AAC9',
                                fontSize: 13,
                            }
                        }
                    },
                    responsive: true,
                    maintainAspectRatio: false
                }
            }
        }
    }
</script>

Any idea what might cause this? I searched a lot for it and I couldn’t find any answer or resolution.

Reproduction

I was not able to replicate this 😦 maybe you have an idea what might cause it

chart.js version

v4.0.7

vue-chartjs version

v3.7.1

Possible solution

No response

[AlexLightning]

Thanks for the answer. I eventually discovered something in my case that made the error go away:

1. For every chart that I needed annotation on, I just used it like described in the docs (those were not throwing any errors)
2. I noticed I was getting error for the other graphs that had no annotation. So I tried adding this to the chartOptions:

plugins: {
  annotation: {
    annotations: [

    ]
},

And the errors are no longer showing. Maybe it will help somebody else that will be in my situation 😃

[AlexLightning]

I did not have “chart: null”, so this wouldn’t have helped in my case. But it might help someone that actually mentioned it