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;
.
