Chart Details
Enter Chart Data
Live Preview
Customization
Accessibility Helper
Data Table
No data to display.
'; return; } let svg = ``; container.innerHTML = svg; } // --- Navigation & PDF --- navigateTabs(dir) { const i = this.TABS_ORDER.indexOf(this.state.activeTab); let n = i; if (dir === 'next' && i < this.TABS_ORDER.length - 1) n++; if (dir === 'prev' && i > 0) n--; this.openTab(null, this.TABS_ORDER[n]); } openTab(event, tabName) { this.state.activeTab = tabName; this.updateUI(); } async generatePdf() { if (this.state.activeTab !== 'export') { this.openTab(null, 'export'); await new Promise(res => setTimeout(res, 50)); } const { jsPDF } = window.jspdf; this.dom.downloadPdfBtn.disabled = true; this.dom.downloadPdfBtn.textContent = 'Generating...'; try { const canvas = await html2canvas(this.dom.pdfOutput, { scale: 2, useCORS: true, backgroundColor: '#ffffff' }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' }); const margin = 40; const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const imgWidth = pdfWidth - margin * 2; const imgHeight = canvas.height * imgWidth / canvas.width; pdf.addImage(imgData, 'PNG', margin, margin, imgWidth, imgHeight); pdf.save(`${this.state.chartTitle.replace(/\s+/g, '_')}.pdf`); } catch (e) { console.error(e); alert('Error generating PDF.'); } finally { this.dom.downloadPdfBtn.disabled = false; this.dom.downloadPdfBtn.textContent = 'Download as PDF'; } } } const app = new AccessibleVizDashboard();