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:
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.
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: hello@postlight.com.
