{"id":14036209,"url":"https://github.com/postlight/react-google-sheet-to-chart","last_synced_at":"2026-03-14T00:08:24.578Z","repository":{"id":34304546,"uuid":"175389440","full_name":"postlight/react-google-sheet-to-chart","owner":"postlight","description":"📊 React component that renders Google Sheets as attractive charts with minimum effort","archived":false,"fork":false,"pushed_at":"2023-03-15T05:38:00.000Z","size":1286,"stargazers_count":64,"open_issues_count":5,"forks_count":5,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-05-12T19:11:20.818Z","etag":null,"topics":["charting","charting-web-component","charts","googlesheets","googlesheetsapi","labs","react"],"latest_commit_sha":null,"homepage":"https://postlight.com/labs/react-google-sheet-to-chart","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/postlight.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-13T09:34:54.000Z","updated_at":"2025-01-06T03:00:42.000Z","dependencies_parsed_at":"2024-08-12T03:14:27.898Z","dependency_job_id":null,"html_url":"https://github.com/postlight/react-google-sheet-to-chart","commit_stats":{"total_commits":53,"total_committers":8,"mean_commits":6.625,"dds":0.3207547169811321,"last_synced_commit":"9739053abd11cdbbc008e14034f60eedd1fe72ec"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postlight%2Freact-google-sheet-to-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postlight%2Freact-google-sheet-to-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postlight%2Freact-google-sheet-to-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postlight%2Freact-google-sheet-to-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/postlight","download_url":"https://codeload.github.com/postlight/react-google-sheet-to-chart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postlight%2Freact-google-sheet-to-chart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259093957,"owners_count":22804262,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charting","charting-web-component","charts","googlesheets","googlesheetsapi","labs","react"],"created_at":"2024-08-12T03:01:52.452Z","updated_at":"2026-03-14T00:08:24.508Z","avatar_url":"https://github.com/postlight.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Google Sheet to Chart\n\n[Postlight](https://postlight.com)'s React Google Sheet to Chart React component transforms Google Sheets to attractive charts in your webapp with minimal effort. Read all about it in [this handy introduction](https://postlight.com/trackchanges/transform-google-sheets-into-beautiful-charts-with-postlights-new-react-component).\n\nTry it now at the [demo site](https://robochart.netlify.com/) and check out the [demo site GitHub repository](https://github.com/postlight/robo-chart-web).\n\n![Robo Chart preview](https://raw.githubusercontent.com/postlight/react-google-sheet-to-chart/master/static/images/robo-chart.gif)\n\n## Installation\n\nThe package can be installed via NPM:\n\n```bash\nnpm install @postlight/react-google-sheet-to-chart --save\n\n# or\n\nyarn add @postlight/react-google-sheet-to-chart\n```\n\n## Usage\n\nTo use this component, you'll need a Google API key. First **enable** Google Sheets API and then generate the API Key [here](https://console.cloud.google.com/apis/credentials) and restrict it to HTTP referrers (web sites).\n\nSecond, you'll need a Google Sheet containing the data you wish to plot. (Be sure to check out [the spreadsheet format](#spreadsheet-format) guidelines.)\n\nFinally, import the React component and initialize it with at least three required props:\n\n- `id`: Spreadsheet ID, e.g. `1RE_JYUCXBXY2LNV5Tp5GegLnMue-CpfTVMxjdudZ8Js` (extractable from a Google sheet URL)\n- `sheet`: Sheet name to parse data from, e.g. `Sheet1`\n- `token`: The Google API key you created above\n\n```javascript\nimport RoboChart from '@postlight/react-google-sheet-to-chart';\n\n// ...your component code and then...\n\n\u003cRoboChart\n  id=\"GOOGLE_SPREADSHEET_ID\"\n  sheet=\"Sheet1\"\n  token=\"GENERATED_GOOGLE_API_KEY\"\n/\u003e;\n```\n\n## Quick setup in an app\n\n- [Create a React app](https://github.com/facebook/create-react-app):\n\n```shell\nyarn create react-app my-app\ncd my-app\n```\n\n- Install the package\n\n```shell\nyarn add @postlight/react-google-sheet-to-chart\n```\n\n- Paste the following in `App.js` and replace `GOOGLE_SPREADSHEET_ID` and `GENERATED_GOOGLE_API_KEY` with appropriate values:\n\n```javascript\nimport React, { Component } from 'react';\nimport RoboChart from '@postlight/react-google-sheet-to-chart';\nimport './App.css';\n\nconst style = { width: '1200px', margin: '0 auto' };\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv style={style}\u003e\n        \u003cRoboChart\n          id=\"GOOGLE_SPREADSHEET_ID\"\n          sheet=\"Sheet1\"\n          token=\"GENERATED_GOOGLE_API_KEY\"\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\nexport default App;\n```\n\n- Start the project\n\n```shell\nyarn start\n```\n\n## Optional props\n\n- `start` e.g. \"A5\" (`start` and `end` create a custom range for your data)\n- `end` e.g. \"E15\"\n- `title` This is the chart title, e.g. \"My Accounts\"\n- `flipAxis` default: {false}\n- `startFrom` default: {0}\n- `stacked` Use only with type bar, default: {false}\n- `type` default: \"line\", should be one of: \"line\", \"bar\", \"horizontalBar\", \"pie\", \"semi-pie\", \"doughnut\", \"semi-doughnut\"\n- `colors` e.g. {['#a1a1a1', '#434343', '#ff0055']}\n- `xsuffix` Add a suffix to x-Axis labels, e.g. \" USD\"\n- `ysuffix` Add a suffix to y-Axis labels\n\nExample:\n\n```javascript\n\u003cRoboChart\n  id=\"GOOGLE_SPREADSHEET_ID\"\n  sheet=\"Companies Values\"\n  token=\"GENERATED_GOOGLE_API_KEY\"\n  type=\"semi-pie\"\n  title=\"Companies values in Billion $\"\n  colors={['#a1a1a1', '#995500', '#990055', '#009955']}\n/\u003e\n```\n\n![Robo Chart preview](https://raw.githubusercontent.com/postlight/react-google-sheet-to-chart/master/static/images/robo-chart-2.png)\n\n## Spreadsheet format\n\nIn order to successfuly generate a chart, the Spreadsheet should have Row titles, Column titles and Values, example:\n\n![Spreadsheet example](https://raw.githubusercontent.com/postlight/react-google-sheet-to-chart/master/static/images/spreadsheet-format.png)\n\n## License\n\nLicensed under either of the below, at your preference:\n\n- Apache License, Version 2.0\n  ([LICENSE-APACHE](LICENSE-APACHE) or http://www.apache.org/licenses/LICENSE-2.0)\n- MIT license\n  ([LICENSE-MIT](LICENSE-MIT) or http://opensource.org/licenses/MIT)\n\n## Contributing\n\nUnless it is explicitly stated otherwise, any contribution intentionally submitted for inclusion in the work, as defined in the Apache-2.0 license, shall be dual licensed as above without any additional terms or conditions.\n\n---\n\n🔬 A Labs project from your friends at [Postlight](https://postlight.com). Happy coding!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostlight%2Freact-google-sheet-to-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpostlight%2Freact-google-sheet-to-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostlight%2Freact-google-sheet-to-chart/lists"}