Too many active WebGL contexts. Oldest context will be lost

plotly.js
1

I’m facing one issue while rendering 3d plots using plotlyJS. The charts are not rendered more than 14 the browser show some error that Too many active WebGL contexts. Oldest context will be lost. Is there any solution available with plotlyJS.

package.json

"plotly.js-dist": "^2.26.0",
    "react": "^18.2.0",

This is how i’m using the component and i also try to purge the chart context on unMount.

import React, { useEffect, useState, useRef } from 'react';
import Plotly from "plotly.js-dist";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);
interface SurfaceChartProps {
  x: number[];
  y: number[];
  z: number[];
  id:string;
  minValue?: number | null;
  maxValue?: number | null;
  showscale?: boolean;
}

const SurfaceChart: React.FC<SurfaceChartProps> = ({
  x,
  y,
  z,
  id,
  minValue,
  maxValue,
  showscale = false,
}) => {
  const plotlyRef = useRef(null);
  const webGLRef = useRef(null);
  const [chartData, setChartData] = useState<any[]>([]);
  const [chartLayout, setChartLayout] = useState<Partial<Plotly.Layout>>({});
  const [isLoaded, setIsLoaded] = useState(false); // Loading state


  useEffect(() => {

    const initialChartData = [
      {
        z: z,
        y: y,
        x: x,
        type: 'surface',
        colorscale: 'Rainbow',
        showscale: showscale,
        visible: showscale ? 'true' : 'false',
        cmin: minValue,
        cmax: maxValue,
        colorbar: {
          thickness: 4,
          tickfont: {
            size: 9
          },
        },
      },
    ];

    const initialChartLayout: Partial<Plotly.Layout> = {
      width: 142, 
      height: 87
    };

    setChartData(initialChartData);
    setChartLayout(initialChartLayout);
  }, [x, y, z]);


  const handleChartInitialized = () => {
    console.log('Chart is completely loaded.');
  };

  useEffect(() => {
    const chart = plotlyRef.current;
    console.log("chart11 : ",chart)
    if (chart !== null) {
      const updatedData = [...chartData];
      const traceIndexToUpdate = 0;
      const chartId = chart.el;
      if (traceIndexToUpdate >= 0 && traceIndexToUpdate < updatedData.length) {
        // Modify the showscale property of the trace
        updatedData[traceIndexToUpdate].showscale = showscale;
        //updatedData[traceIndexToUpdate].visible = 'true';

        // Apply the update to the chart using Plotly.react
        Plotly.react(chartId, updatedData, chartLayout);
      }
    }
  }, [showscale]);

  useEffect(() => {
    return () => {
      if (plotlyRef.current) {
        Plotly.purge(plotlyRef.current);
      }

      if (webGLRef.current) {
        // Cleanup and release any WebGL resources in the WebGLComponent
        webGLRef.current.cleanup();
      }
    };
  }, []);

  return (
    <div className="plotly-addon" id={id}>
      
      {chartData.length > 0 && (
       
        <Plot
          ref={plotlyRef}
          data={chartData}
          layout={chartLayout}
          config={{
            displayModeBar: false,
          }}
          onInitialized={handleChartInitialized}
        />
      )}
     
    </div>
  );
};

export default SurfaceChart;

whats wrong with the code. It is not rendering the more the 14 charts.
please help.

2

Have you solved it