Get in touch
Engineering

Transform Google Sheets into Beautiful Charts with Postlight's New React Component

Adding a chart to your React app has never been easier.

As a user, it’s easy to make charts inside a spreadsheet like Excel or Google Sheets, but as a developer, you’ve got to learn the ins and outs of a plotting library to include charts in your React-powered webapp. Save the time and effort: Meet Postlight’s newest React component, Google Sheet to Chart, which enables engineers to embed gorgeous, customizable charts inside their React apps with minimal configuration.

Get it here for free:

postlight/react-google-sheet-to-chart

📊 React Component that renders Google Sheets as attractive charts with minimum effort – postlight/react-google-sheet-to-chart


This React component provides a configurable npm package for developers to include in their React-powered web apps. Once you install the component via npm or yarn, import the component and initialize it with at least three required props: a Google Sheet ID, a sheet name, and an API key to get started. Check out the README for detailed instructions.

Try It Now

To show off what’s possible, I put together a demo site which uses this new component. Robo Chart helps users quickly plot, edit and export different types of charts using data stored on a Google Sheet.

Example charts, generated by React Google Sheet to Chart.

From Robo Chart, you can save the exported result to use in your documents, blog posts or articles. Try out Robo Chart and check out the source code. Then:

yarn add @postlight/react-google-sheet-to-chart

And be sure to let us know what you build!

Alexi Akl (@alexiakl) is a Lead Engineer at Postlight. Get in touch: [email protected].

Story published on Apr 24, 2019.