Custom Export Button Text Becomes Undefined When Using useEffect in Canvasjs

Question

https://stackblitz.com/edit/vitejs-vite-myutvi?file=src%2FApp.jsx

Hello,

I’m currently integrating a custom export functionality. My goal is to add an export button to display “Save as CSV” but the text is rendering as undefined.

import React, { useEffect, useState } from 'react';
import CanvasJSReact from '@canvasjs/react-charts';

const { CanvasJSChart } = CanvasJSReact;

function Chart({ isLoading, data }) {
  // Default chart options setup
  const defaultOptions = {
    animationEnabled: true,
    exportEnabled: true,
    theme: 'dark2',
    // Additional options...
  };

  const [chartOptions, setChartOptions] = useState(defaultOptions);

  useEffect(() => {
    // Conditional logic based on <code>isLoading</code> and <code>data</code>
    if (isLoading) {
      setChartOptions({ ...defaultOptions, /* Loading state */ });
    } else if (data?.length > 0) {
      setChartOptions({ ...defaultOptions, /* Data available state */ });
    } else {
      setChartOptions({ ...defaultOptions, /* No data state */ });
    }
  }, [isLoading, data]);

 
  return (
    <CanvasJSChart
      options={chartOptions}
      onRef={(chart) => {
        if (chart?.get("exportEnabled")) {
          const text = document.createTextNode("Save as CSV");
          const exportCSV = document.createElement("div");
          exportCSV.appendChild(text);
          exportCSV.setAttribute('style', <code>padding: 12px 8px; background-color: ${chart.toolbar.itemBackgroundColor}; color: ${chart.toolbar.fontColor}</code>);
          exportCSV.addEventListener('mouseover', () => {
            exportCSV.setAttribute('style', <code>padding: 12px 8px; background-color: ${chart.toolbar.itemBackgroundColorOnHover}; color: ${chart.toolbar.fontColorOnHover}</code>);
          });
          exportCSV.addEventListener('mouseout', () => {
            exportCSV.setAttribute('style', <code>padding: 12px 8px; background-color: ${chart.toolbar.itemBackgroundColor}; color: ${chart.toolbar.fontColor}</code>);
          });
          chart._toolBar.lastChild.appendChild(exportCSV);
        }
      }}
    />
  );
}

function App() {
  return <div className="App"><Chart isLoading={true} data={[]} /></div>;
}

export default App;

Answer 1

I reported the bug to canvasjs and they fixed the issue in a new release.