Charts: Download Individual Charts

[jennifer-luo-dev]

Assigned To: Vansh, Brianna

Overview

Users should be able to download individual charts from the dashboard for use in reports, presentations, or offline analysis. This ticket focuses on implementing the chart-level download functionality by converting rendered charts into images and triggering a client-side download.

Task Breakdown

Implement the handleDownload functionality in chart.tsx so that each chart can be exported as a PNG image using html2canvas.

• convert chart to image using html2canvas
• trigger download

Task

Start by looking at chart.tsx and locating the handleDownload function – this is the function that you will be implementing. The handleDownload function should target the chart container and use html2canvas to convert the chart into a canvas. Then, it should convert the canvas into an image and trigger a client-side download of the image as a PNG.

• Use html2canvas to capture the chart (note: make sure the chart is fully rendered before capture)
• After rendering convert the canvas to an image using the provided code as a template:

// image generation code goes here …
const image = canvas.toDataURL("image/png");
const link = document.createElement("a");
link.href = image;
link.download = "section.png";
// programmatically click the link so that the image
// automatically downloads
link.click();

• Testing

try downloading charts by clicking on the download button to see if it downloads the image of the chart onto your local machine as a PNG
test to see if your code properly addresses edge cases
upon download, the chart image should be named <chartTitle>.png

Resources

• html2canvas documentation
• MDN Canvas toDataURL
• React useRef hook
• chart.tsx
• Figma