Create high-quality charts for React and PowerPoint

@foxyburrow — stock.adobe.com

When you need some high-quality data visualisations for your React project you have multiple options. What if you also need the same charts to create a downloadable PowerPoint presentation and you don’t want to do the same work twice?

Simplest approach to the problem would be rendering the whole view on the server side, using tools like PhantomJS [1] or Puppeteer [2], and then saving the chart as an image. This can, however, turn out to be a little tricky and not so ‘lossless’ solution.

In this article I will show you how to create charts for your React application and then use these in a PowerPoint slide without quality loss.

Let’s assume we have already created a project containing the React client and the Express.js server. We want to add a Chart component that could be easily accessed in the backend. To achieve that, let’s use Scalable Vector Graphics (SVG) elements, that can be created and styled with D3.js library [3].

To use the chart on the server side, we need to export it as a module. Let’s create a script that will compile the whole client and turn it into a module.

Let’s not forget to copy the package.json and adjust the names accordingly

Once we have the module ready, we can render the Chart component on the server-side and extract the SVG contents.

We want to make sure all the CSS variables are set to proper values

The last step is optimising the result SVG and saving it to the filesystem.

Enhanced metafile format (EMF) stores graphical images device-independently. An EMF is the native vector format for PowerPoint and acts in a similar manner to a SVG file. Shapes and text are crisp and we can even ungroup the visualisation and modify single components.

Since we already are able to generate and save the SVG files at this point, all we need to do is find a way to convert them to the EMF format. For this step we want to use Inkscape [4].

The EMF file created in the previous step can then easily be appended to the PPT template, as an image (provided the template has a proper custom tag in place where the image should be appended), with the python-pptx library [5].

References

  1. https://phantomjs.org/
  2. https://github.com/puppeteer/puppeteer
  3. https://d3js.org/
  4. https://inkscape.org/about/overview/
  5. https://python-pptx.readthedocs.io/en/latest/index.html

Technical Architect @ Adobe