redash/client/app/visualizations/chart/Renderer/PlotlyChart.jsx

import { isArray, isObject } from "lodash";
import React, { useState, useEffect } from "react";
import { RendererPropTypes } from "@/visualizations";
import resizeObserver from "@/services/resizeObserver";

import getChartData from "../getChartData";
import { Plotly, prepareData, prepareLayout, updateData, applyLayoutFixes } from "../plotly";

export default function PlotlyChart({ options, data }) {
  const [container, setContainer] = useState(null);

  useEffect(() => {
    if (container) {
      const plotlyOptions = { showLink: false, displaylogo: false };

      const chartData = getChartData(data.rows, options);
      const plotlyData = prepareData(chartData, options);
      const plotlyLayout = prepareLayout(container, options, plotlyData);

      // It will auto-purge previous graph
      Plotly.newPlot(container, plotlyData, plotlyLayout, plotlyOptions).then(() => {
        applyLayoutFixes(container, plotlyLayout, (e, u) => Plotly.relayout(e, u));
      });

      container.on("plotly_restyle", updates => {
        // This event is triggered if some plotly data/layout has changed.
        // We need to catch only changes of traces visibility to update stacking
        if (isArray(updates) && isObject(updates[0]) && updates[0].visible) {
          updateData(plotlyData, options);
          Plotly.relayout(container, plotlyLayout);
        }
      });

      const unwatch = resizeObserver(container, () => {
        applyLayoutFixes(container, plotlyLayout, (e, u) => Plotly.relayout(e, u));
      });
      return unwatch;
    }
  }, [options, data, container]);

  // Cleanup when component destroyed
  useEffect(() => {
    if (container) {
      return () => Plotly.purge(container);
    }
  }, [container]);

  return <div className="chart-visualization-container" ref={setContainer} />;
}

PlotlyChart.propTypes = RendererPropTypes;