{"_id":"@alheimsins/react-google-charts","_rev":"1-f3b549a81211513dbaeecd2a42d93d17","name":"@alheimsins/react-google-charts","dist-tags":{"latest":"1.6.5"},"versions":{"1.6.5":{"name":"@alheimsins/react-google-charts","version":"1.6.5","type":"react-component","description":"react-google-charts React component","main":"build/index.js","scripts":{"start":"parcel demo/index.html","build":"microbundle"},"dependencies":{"loadjs":"^3.3.1"},"peerDependencies":{"react":">=15.0.0","react-dom":">=15.0.0"},"devDependencies":{"jsdoc":"^3.4.0","jsdom":"^9.5.0","microbundle":"^0.4.4","object-assign":"^4.1.0","parcel-bundler":"^1.8.1","react":"^16.3.2","react-dom":"^16.3.2","v8-compile-cache":"^2.0.0"},"gh-pages-deploy":{"staticpath":"demo/dist/"},"author":{"name":"Rakan Nimer"},"homepage":"https://rakannimer.github.io/react-google-charts/","license":"MIT","repository":{"type":"git","url":"git+https://github.com/RakanNimer/react-google-charts.git"},"keywords":["react","google","charts"],"files":["build/"],"bugs":{"url":"https://github.com/RakanNimer/react-google-charts/issues"},"directories":{"doc":"docs"},"gitHead":"2d48b5aaddc2b6122de520d522a1ea4e6d7d042d","_id":"@alheimsins/react-google-charts@1.6.5","_npmVersion":"6.1.0","_nodeVersion":"10.4.1","_npmUser":{"name":"maccyber","email":"jonas.enge@gmail.com"},"dist":{"integrity":"sha512-rrHxgHfgiMRLLktOHbz+wGP+8i8DPPXTW9okP5AkZ5fAEDJ3BpJPgI2vvLWFmUdI8r8+2DecFfzDnQVpDUb8AQ==","shasum":"706cd7d9e738b66ec800507aea63738ae0350b29","tarball":"https://registry.npmjs.org/@alheimsins/react-google-charts/-/react-google-charts-1.6.5.tgz","fileCount":9,"unpackedSize":108123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJSshCRA9TVsSAnZWagAAj7IQAJGhvxMkuvPQ14V+N9uN\nAZhsux4PbfWX8zRmaxQdbYA0sdeuNvqDwmvzbKbrz1s2XOFZFkm79JiCpVgu\nGvDcjx60K0YGXcFBUEGxjTVx2hRMGNGGMU4FS6W5b+xn2/s3U075kpYMeGQb\nD7hLARQKMWAUGAsW750VFZ4CmzvFrtdDZcgAqm9976vf8rAT6Ty07htPgiJx\naCuYlCrxZXHLN4AIXt+NeDCjUcOQ+f88zcm56HU1PmVdW+av33+LDdQrWm3M\nrfV6oHZ6us2nmXH2W8Ds3v+Vj2lpKk0OuXkbf0irjmYzSMj7hrSJ3fI+6A9n\nQmlGnCKb4CirSSBZhxmcyjNmxlWAYD94WV9X5qqIeH8PUsdscBUGI2CJMrpg\nVIys96i0IM/KCcp2nup602pU6QBr39ysCqQk/5VzJ7dAwX63HSgvOxdCIPu4\nizikZRUX5tN30DcXZ7o0mo6e4ygYq8N8QYu7cC/QXqOW1Y6oHudFbtPHiTv8\njGIXuddSAtrbU90J3AY9MX+EvWqbsZa2jnUpjRVxF/hURL9vJN3+R/qi02vc\n/NzXxTXrMt2ftgB4IrGQmqX7v7O/aZ7CVS8Znip2dgW7QmLp7/EN6IgVU2OT\nCLMpQE88OlnztPsddkviynBoMX98uFkxNFs492GH9/UMDnI2yMY1J0AzYylT\nf3s5\r\n=vm6G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB+Tr/7YFyaSQbs4b9tXaNXKO06w3wtWtV4FBSZWNHjRAiEAsJcYt836NgU/mK3Yjmclzrdr+nAg0tuHi+5FRPo21B8="}]},"maintainers":[{"name":"maccyber","email":"jonas.enge@gmail.com"},{"name":"zrrrzzt","email":"geir.gasodden@pythonia.no"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-google-charts_1.6.5_1529162528854_0.03803035911519603"},"_hasShrinkwrap":false}},"time":{"created":"2018-06-16T15:22:08.638Z","1.6.5":"2018-06-16T15:22:08.923Z","modified":"2022-04-04T12:53:07.472Z"},"maintainers":[{"name":"maccyber","email":"jonas.enge@gmail.com"},{"name":"zrrrzzt","email":"geir.gasodden@pythonia.no"}],"description":"react-google-charts React component","homepage":"https://rakannimer.github.io/react-google-charts/","keywords":["react","google","charts"],"repository":{"type":"git","url":"git+https://github.com/RakanNimer/react-google-charts.git"},"author":{"name":"Rakan Nimer"},"bugs":{"url":"https://github.com/RakanNimer/react-google-charts/issues"},"license":"MIT","readme":"# react-google-charts\n\n[![CircleCI](https://circleci.com/gh/RakanNimer/react-google-charts.svg?style=shield)](https://circleci.com/gh/RakanNimer/react-google-charts)\n\n[![NPM](https://nodei.co/npm/react-google-charts.png?downloads=true&downloadRank=true)](https://npmjs.org/package/react-google-charts)\n\n\nA React JS wrapper to make it easy and fun to work with Google Charts.\n\n\n## Installation\n\n```\nyarn add react-google-charts\n```\n\nor \n\n```\nnpm i -s react-google-charts\n```\nor from unpkg.com using html script tag : \n\n```html\n <script src=\"https://unpkg.com/react-google-charts@latest/umd/react-google-charts.min.js\" />\n```\n\nand you can then use it using ReactGoogleCharts.default.Chart \n\n[JSFiddle example](https://jsfiddle.net/f8zpr8uc/)\n\n\n## Quick Start\n\n```javascript\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Chart } from 'react-google-charts';\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      <div className={'my-pretty-chart-container'}>\n        <Chart\n          chartType=\"ScatterChart\"\n          data={[['Age', 'Weight'], [8, 12], [4, 5.5]]}\n          options={{}}\n          graph_id=\"ScatterChart\"\n          width=\"100%\"\n          height=\"400px\"\n          legend_toggle\n        />\n      </div>\n    );\n  }\n}\nrender(<App />, document.querySelector('#app'));\n```\n\n## Quick Walkthrough\n\n### Initialize from data array :\n\n```javascript\nimport { Chart } from 'react-google-charts';\nimport React from 'react';\n\nclass ExampleChart extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      options: {\n        title: 'Age vs. Weight comparison',\n        hAxis: { title: 'Age', minValue: 0, maxValue: 15 },\n        vAxis: { title: 'Weight', minValue: 0, maxValue: 15 },\n        legend: 'none',\n      },\n      data: [\n        ['Age', 'Weight'],\n        [8, 12],\n        [4, 5.5],\n        [11, 14],\n        [4, 5],\n        [3, 3.5],\n        [6.5, 7],\n      ],\n    };\n  }\n  render() {\n    return (\n      <Chart\n        chartType=\"ScatterChart\"\n        data={this.state.data}\n        options={this.state.options}\n        graph_id=\"ScatterChart\"\n        width=\"100%\"\n        height=\"400px\"\n        legend_toggle\n      />\n    );\n  }\n}\nexport default ExampleChart;\n```\n\n### Initialize using rows and columns :\n\n```javascript\nimport { Chart } from 'react-google-charts';\nimport React from 'react';\n\nclass ExampleChart extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      options: {\n        title: 'Age vs. Weight comparison',\n        hAxis: { title: 'Age', minValue: 0, maxValue: 15 },\n        vAxis: { title: 'Weight', minValue: 0, maxValue: 15 },\n        legend: 'none',\n      },\n      rows: [\n        [8, 12],\n        [4, 5.5],\n        [11, 14],\n        [4, 5],\n        [3, 3.5],\n        [6.5, 7],\n      ],\n      columns: [\n        {\n          type: 'number',\n          label: 'Age',\n        },\n        {\n          type: 'number',\n          label: 'Weight',\n        },\n      ],\n    };\n  }\n  render() {\n    return (\n      <Chart\n        chartType=\"ScatterChart\"\n        rows={this.state.rows}\n        columns={this.state.columns}\n        options={this.state.options}\n        graph_id=\"ScatterChart\"\n        width={'100%'}\n        height={'400px'}\n        legend_toggle\n      />\n    );\n  }\n}\nexport default ExampleChart;\n\n```\n\n### Listen to chart events\n\nSet the chart-specific events you want to listen to and the corresponding callback.\nThe callback has the component as an argument.\n\n```javascript\nimport React from 'react';\nimport { Chart } from 'react-google-charts';\n\nclass ExampleChart extends React.Component {\n  constructor(props) {\n    super(props);\n    this.chartEvents = [\n      {\n        eventName: 'select',\n        callback(Chart) {\n            // Returns Chart so you can access props and  the ChartWrapper object from chart.wrapper\n          console.log('Selected ', Chart.chart.getSelection());\n        },\n      },\n    ];\n    this.state = {\n      options: {\n        title: 'Age vs. Weight comparison',\n        hAxis: { title: 'Age', minValue: 0, maxValue: 15 },\n        vAxis: { title: 'Weight', minValue: 0, maxValue: 15 },\n        legend: 'none',\n      },\n      rows: [\n        [8, 12],\n        [4, 5.5],\n        [11, 14],\n        [4, 5],\n        [3, 3.5],\n        [6.5, 7],\n      ],\n      columns: [\n        {\n          type: 'number',\n          label: 'Age',\n        },\n        {\n          type: 'number',\n          label: 'Weight',\n        },\n      ],\n    };\n  }\n  render() {\n    return (\n      <Chart\n        chartType=\"ScatterChart\"\n        rows={this.state.rows}\n        columns={this.state.columns}\n        options={this.state.options}\n        graph_id=\"ScatterChart\"\n        width=\"100%\"\n        height=\"400px\"\n        chartEvents={this.chartEvents}\n      />\n    );\n  }\n}\nexport default ExampleChart;\n```\n\n## Isomorphic support\n\nSupports isomorphic configurations out of the box thanks to [@voogryk](https://github.com/voogryk)\n\n## Examples\n\n### Run the example app\n\n```bash\ngit clone https://www.github.com/rakannimer/react-google-charts\ncd react-google-charts/demo\nnpm link ../\nnpm install\nnpm start\n```\n\n## FAQ\n\n### Timeline/table chart is not rendering.\n\nChart loader is a singleton that only loads chartPackages once, and by default it loads the ```corechart``` packages.\nIf you need to use packages like ```timeline```  or ```table```, add chartPackages prop with value ['corechart', 'timeline'] to your charts.\n\n\n## [Changelog](./CHANGELOG.md)\n\n## Contributing\n\nContributions are very welcome. Check out [CONTRIBUTING.md](CONTRIBUTING.md)\n","readmeFilename":"README.md"}