Custom Export Button Text Becomes Undefined When Using useEffect

[SCompliance]

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;

[Sachin Bisht]

@scompliance,

Updating the text to ‘Save as CSV’ after rendering the chart seems to be working in this case. Please take a look at this updated Stackblitz.

—
Sachin Bisht
Team CanvasJS

[SCompliance]

https://stackblitz.com/edit/vitejs-vite-3xmxag?file=src%2FApp.js

it does not work when a prop changes. isn’t there an easier way to fix this?

[Sachin Bisht]

@scompliance,

We are looking into your query and will get back to you at the earliest.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@scompliance,

The text was getting changed to ‘undefined’ due to some internal code, which we have fixed in the current release. Please refer to this blog post for more information on the current release. Also, take a look at this updated updated StackBlitz for working code.

Sachin Bisht
Team CanvasJS