RangeError: Maximum call stack size exceeded

[simeon9696]

I'm following the instructions here and I got the below error as soon as the graph is plotted. It only happens when I enable this package. I also get the error even though I have no annotation property in the config. The graph still plots but this error is thrown along with it. My function is attached after the stack trace.

instrument.js?ea14:109 RangeError: Maximum call stack size exceeded
    at Reflect.ownKeys (<anonymous>)
    at Object.ownKeys (helpers.segment.js?dd3d:1661)
    at Function.keys (<anonymous>)
    at Observer.walk (vue.runtime.esm.js?2b0e:930)
    at new Observer (vue.runtime.esm.js?2b0e:920)
    at observe (vue.runtime.esm.js?2b0e:988)
    at defineReactive$$1 (vue.runtime.esm.js?2b0e:1020)
    at Observer.walk (vue.runtime.esm.js?2b0e:932)
    at new Observer (vue.runtime.esm.js?2b0e:920)
    at observe (vue.runtime.esm.js?2b0e:988)
    at defineReactive$$1 (vue.runtime.esm.js?2b0e:1020)
    at Observer.walk (vue.runtime.esm.js?2b0e:932)
    at new Observer (vue.runtime.esm.js?2b0e:920)
    at observe (vue.runtime.esm.js?2b0e:988)
    at defineReactive$$1 (vue.runtime.esm.js?2b0e:1020)
    at Observer.walk (vue.runtime.esm.js?2b0e:932)
    at new Observer (vue.runtime.esm.js?2b0e:920)
    at observe (vue.runtime.esm.js?2b0e:988)
    at defineReactive$$1 (vue.runtime.esm.js?2b0e:1020)
    at Observer.walk (vue.runtime.esm.js?2b0e:932)
    at new Observer (vue.runtime.esm.js?2b0e:920)
    at observe (vue.runtime.esm.js?2b0e:988)
    at defineReactive$$1 (vue.runtime.esm.js?2b0e:1020)
    at Observer.walk (vue.runtime.esm.js?2b0e:932)
    at new Observer (vue.runtime.esm.js?2b0e:920)
    at observe (vue.runtime.esm.js?2b0e:988)
    at defineReactive$$1 (vue.runtime.esm.js?2b0e:1020)
    at Observer.walk (vue.runtime.esm.js?2b0e:932)
    at new Observer (vue.runtime.esm.js?2b0e:920)
    at observe (vue.runtime.esm.js?2b0e:988)
    at defineReactive$$1 (vue.runtime.esm.js?2b0e:1020)
    at Observer.walk (vue.runtime.esm.js?2b0e:932)
    at new Observer (vue.runtime.esm.js?2b0e:920)
    at observe (vue.runtime.esm.js?2b0e:988)
    at defineReactive$$1 (vue.runtime.esm.js?2b0e:1020)
    at Observer.walk (vue.runtime.esm.js?2b0e:932)
    at new Observer (vue.runtime.esm.js?2b0e:920)
    at observe (vue.runtime.esm.js?2b0e:988)
    at defineReactive$$1 (vue.runtime.esm.js?2b0e:1020)
    at Observer.walk (vue.runtime.esm.js?2b0e:932)
    at new Observer (vue.runtime.esm.js?2b0e:920)
    at observe (vue.runtime.esm.js?2b0e:988)
    at defineReactive$$1 (vue.runtime.esm.js?2b0e:1020)
    at Observer.walk (vue.runtime.esm.js?2b0e:932)
    at new Observer (vue.runtime.esm.js?2b0e:920)
    at observe (vue.runtime.esm.js?2b0e:988)
    at defineReactive$$1 (vue.runtime.esm.js?2b0e:1020)
    at Observer.walk (vue.runtime.esm.js?2b0e:932)
    at new Observer (vue.runtime.esm.js?2b0e:920)
    at observe (vue.runtime.esm.js?2b0e:988)

import { CrosshairPlugin, Interpolate } from "chartjs-plugin-crosshair";

import {
  Chart,
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  Legend,
  Decimation,
  Title,
  Tooltip,
  CategoryScale,
  Interaction
} from "chart.js";
import annotationPlugin from "chartjs-plugin-annotation";


Chart.register(
  LineController,
  LineElement,
  PointElement,
  Legend,
  Decimation,
  LinearScale,
  Title,
  Tooltip,
  CategoryScale,
  CrosshairPlugin,
  annotationPlugin
);
    plotControlGraph() {
      const data = {
        labels: this.existingMeasurements.map(m =>
          m.dateAdded.toDate().toLocaleString()
        ),
        datasets: [
          {
            label: "Characteristic",
            backgroundColor: "#000000",
            borderColor: "#FFFFFF",
            data: this.existingMeasurements.map(m => m.value)
          }
        ]
      };
      const annotation2 = {
        type: "line",
        scaleID: "y",
        borderWidth: 3,
        borderColor: "white",
        value: 5,
        label: {
          content: "Hello",
          enabled: true
        }
      };
      const config = {
        scales: {
          y: {
            stacked: true
          }
        },
        type: "line",
        data,
        options: {

          interaction: {
            mode: "index",
            intersect: false,
            axis: "x"
          },
          spanGaps: true, // enable for all datasets
          normalized: true,

          plugins: {
            decimation: {
              enabled: true,
              algorithm: "lttb"
            },

            legend: {
              display: false
            },
            autocolors: false,
            annotation: {
              annotations: {
                annotation2,
                line1: {
                  type: "line",
                  yMin: 60,
                  yMax: 60,
                  borderColor: "rgb(255, 99, 132)",
                  borderWidth: 2
                }
              }
            }
          }
        }
      };

      try {
        const ctx = document.querySelector("#myChart");
        if (this.chart) this.chart.destroy();
        this.chart = new Chart(ctx, config);
      } catch (error) {
        console.error(error);
      }
    }

[kurkle]

Vue is trying to observe the chart instance and that collides with the proxies chart uses internally. If you need something observable, it should be the data and / or config, depending what can change. The instance should not be observed.

[kurkle]

See also: https://stackoverflow.com/questions/68602389/maximum-call-stack-error-when-attempting-to-update-chart-in-vue-js

[husmen73]

I got same error in html+javascript page.

Registered Plugins:

Chart.register(annotationPlugin, zoomPlugin, ChartStreaming, CategoryScale, LinearScale, LineController, PointElement, LineElement);

If I remove annotationPlugin from register function, does not show any error. Also this error comes after sometimes like 2-5 minutes later.

Stack on Firefox:

Uncaught InternalError: too much recursion
_resolve helpers.segment.js:1807
_resolveWithPrefixes helpers.segment.js:1794
get helpers.segment.js:1605
_cached helpers.segment.js:1687
get helpers.segment.js:1604
_resolveWithContext helpers.segment.js:1695
get helpers.segment.js:1647
_cached helpers.segment.js:1687
get helpers.segment.js:1646
_resolve helpers.segment.js:1807
_resolveWithPrefixes helpers.segment.js:1794
get helpers.segment.js:1605

Google Chrome Stack Error: Maximum call stack size error.

[LeeLenaleee]

Do you have a reproducable example with codesanbox for example @husmen73?

[vmcvlad]

Hi! I am facing the same issue

Here is a very quickly pulled sandbox example, but the issue is demonstrated nonetheless

https://codesandbox.io/s/tender-dust-r2mu4?file=/src/components/Chart.vue:0-1813

[kurkle]

You should not include the chart instance in the data (observed stuff).

https://codesandbox.io/s/sparkling-wildflower-iwxtx

[vmcvlad]

Should have read more carefully, that was it. Thanks!