In this guide, I'll demonstrate the surprisingly straightforward process of exporting charts from a Dashboard using a popular open-source JavaScript library and a few lines of code. I began by designing a basic dashboard featuring three types of charts: a line chart, a bar chart, and a pie chart. While I opted for ChartJS for this project, other libraries like D3 or ECharts are also viable choices. Each chart widget in the dashboard includes a header button, which initiates the export process. Here's a glimpse of the dashboard setup: The second phase involves setting up the export feature. For this, I selected jsPDF, a versatile open-source JavaScript library that facilitates the conversion of charts to PDF format. This library is compatible with any JavaScript framework, though my example uses plain JavaScript. We can integrate jsPDF into a project via CDN. The export functionality activates upon clicking the export button. The process is broken down into the following five steps: Identifying the chart element. Transforming it into an image. Initializing jsPDF with a chosen orientation. Incorporating the image into the PDF in PNG format with appropriate dimensions. Finalizing the PDF. The corresponding code snippet is as follows: window.jsPDF = window.jspdf.jsPDF;

const exportChart = (id, dimensions) => {
  const chartEl = document.getElementById(id);
  const image = chartEl.toDataURL('image/png', 1.0);

  const pdf = new jsPDF('landscape');
  pdf.addImage(image, 'PNG', ...dimensions);
  pdf.save('chart.pdf');
} To streamline the process, I encapsulated these steps into a single function, eliminating redundant code. This function requires just the element's id and its dimensions as inputs. You can find the complete dashboard implementation on my . GitHub page As evident, the implementation is concise, requiring just five lines of code. However, this example is quite basic. In a more complex scenario, we might need to add text, titles, pagination, etc. This can be achieved by consulting the jsPDF documentation. I hope this brief tutorial proves useful. The best way to understand it is by trying it out yourself. Happy coding!

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Augmentastic || Augmented Reality

Building Engaging Real-Time Data Visualizations In React With Highcharts

Canvas And React: A Simple Guide To Data Charts

Five Simple Steps to Convert Dashboard Charts Into PDFs

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Things You Will Love About Micro Frontends

10 Resources That’ll Make You Better At Dashboard Creation

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

10 Data Table Libraries for JavaScript

10 Dashboard Templates and Effective Indicators for Tracking KPI’s

10 Best React Native Chart Libraries

3 Things You Will Love About Micro Frontends

10 Resources That’ll Make You Better At Dashboard Creation

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

10 Data Table Libraries for JavaScript

10 Dashboard Templates and Effective Indicators for Tracking KPI’s

10 Best React Native Chart Libraries

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps