{"_id":"@canvasjs/react-charts","_rev":"2-b350b1437043e3e0f50c8d3b10f63ab0","name":"@canvasjs/react-charts","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@canvasjs/react-charts","version":"1.0.0","description":"CanvasJS React Charts","main":"canvasjs.react.js","keywords":["react charts","react graphs","react charting library","react chart library","html5 charts","charts","graphs","dataviz","canvasjs","canvas","high performance charts","line charts","area charts","bar charts","pie charts"],"author":{"name":"fenopix"},"license":"MIT","homepage":"https://canvasjs.com/react-charts/","peerDependencies":{"react":">=16.0.0","@canvasjs/charts":"^3.7.5"},"_id":"@canvasjs/react-charts@1.0.0","_nodeVersion":"19.9.0","_npmVersion":"9.6.5","dist":{"integrity":"sha512-wGI675kz65owAwXZWzJULK9GXKCrPV59+CCawXP801f4rmYGmPskdtGrczgJhA8ThFEgIvq3K4qrkpLDPSmxCQ==","shasum":"84e97e1e3bd045cf345ac9dbe270edf11446af51","tarball":"https://registry.npmjs.org/@canvasjs/react-charts/-/react-charts-1.0.0.tgz","fileCount":4,"unpackedSize":8416,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIChpu+yoEj8IB/DdLyYVQ8FY45gmV3fCCbn4CrXQXDOBAiBxYEQKP62hyfODgyTB52HfiDF4+XXIdLtYc4Ux42L2+g=="}]},"_npmUser":{"name":"canvasjs","email":"info@canvasjs.com"},"directories":{},"maintainers":[{"name":"canvasjs","email":"info@canvasjs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-charts_1.0.0_1684415610325_0.8104151617258777"},"_hasShrinkwrap":false},"1.0.1":{"name":"@canvasjs/react-charts","version":"1.0.1","description":"CanvasJS React Charts","main":"canvasjs.react.js","keywords":["react charts","react graphs","react charting library","react chart library","html5 charts","charts","graphs","dataviz","canvasjs","canvas","high performance charts","line charts","area charts","bar charts","pie charts"],"author":{"name":"fenopix"},"license":"MIT","homepage":"https://canvasjs.com/react-charts/","peerDependencies":{"react":">=16.0.0","@canvasjs/charts":"^3.7.5"},"_id":"@canvasjs/react-charts@1.0.1","gitHead":"109a71001ec5c1b39eab648c6df753b0164d285a","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-bNW2NiO8BFKHv9ibnsEz6slKBn858OEs2OPcl+eRjJK0vuafUjLRYnPaqepW1++cHRsYnRU5WELAMRyPszFu3A==","shasum":"69bb7f2a9121ff99809c30698b53c45635a4b7d6","tarball":"https://registry.npmjs.org/@canvasjs/react-charts/-/react-charts-1.0.1.tgz","fileCount":4,"unpackedSize":8454,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBLc3kDJsr+zWE9hpq41HjCpX5jdRBHzy9cCULEhvqIXAiEAy2lgSS4OzzuGaWCRTSYMHL9fGHVDGj7JTcLTRgUBf4c="}]},"_npmUser":{"name":"canvasjs","email":"info@canvasjs.com"},"directories":{},"maintainers":[{"name":"canvasjs","email":"info@canvasjs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-charts_1.0.1_1708924242938_0.958571052894305"},"_hasShrinkwrap":false},"1.0.2":{"name":"@canvasjs/react-charts","version":"1.0.2","description":"CanvasJS React Charts - Official","main":"canvasjs.react.js","keywords":["react","charts","react graphs","react charting library","react chart library","react charts","html5 charts","graphs","dataviz","canvasjs","canvas","high performance charts","line charts","area charts","bar charts","pie charts"],"author":{"name":"fenopix"},"license":"MIT","homepage":"https://canvasjs.com/react-charts/","peerDependencies":{"react":">=16.0.0","@canvasjs/charts":"^3.7.5"},"_id":"@canvasjs/react-charts@1.0.2","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-PZgJlDbGdMF4AN/KvrvGY9X50EByJMZ7MHfQB/U0aky9Onn9mt0CpsvwudBsBe+DofaV3SHR4SHn/Wfo/pubDw==","shasum":"56b1fa72018522240ce03106426f4ee57959112f","tarball":"https://registry.npmjs.org/@canvasjs/react-charts/-/react-charts-1.0.2.tgz","fileCount":4,"unpackedSize":8827,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCmkDiSFg+fWCgNMkym0aIgW3rZW+o0M69KDqLVo0VWQIgZfxeeWzkOe7oUCZxhw6gCrn7MPnfx8+HMIcfw4JDse8="}]},"_npmUser":{"name":"canvasjs","email":"info@canvasjs.com"},"directories":{},"maintainers":[{"name":"canvasjs","email":"info@canvasjs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-charts_1.0.2_1709199643308_0.8306657489702216"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-18T13:13:30.253Z","1.0.0":"2023-05-18T13:13:30.486Z","modified":"2024-02-29T09:40:44.294Z","1.0.1":"2024-02-26T05:10:43.087Z","1.0.2":"2024-02-29T09:40:43.459Z"},"maintainers":[{"name":"canvasjs","email":"info@canvasjs.com"}],"description":"CanvasJS React Charts - Official","homepage":"https://canvasjs.com/react-charts/","keywords":["react","charts","react graphs","react charting library","react chart library","react charts","html5 charts","graphs","dataviz","canvasjs","canvas","high performance charts","line charts","area charts","bar charts","pie charts"],"author":{"name":"fenopix"},"license":"MIT","readme":"
\r\n\t\r\n\t\t\"CanvasJS\"/\r\n\t\r\n
\r\n\r\n# CanvasJS React Charts - Official\r\nCanvasJS [React Chart](https://canvasjs.com/react-charts/) Component for creating interactive charts and graphs for your react applications. Library supports a wide range of chart types including bar, line, area, pie, doughnut, etc.\r\n\r\n
\r\n\r\n\r\n\t\"CanvasJS\r\n\r\n\r\n
\r\n\r\n## Important Links\r\n- [Official Website](https://canvasjs.com/)\r\n- [React Charts Demo](https://canvasjs.com/react-charts/)\r\n- [Download CanvasJS](https://canvasjs.com/download-html5-charting-graphing-library/)\r\n- [React Charts Integration](https://canvasjs.com/docs/charts/integration/react/)\r\n- [Chart Documentation](https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/)\r\n- [CanvasJS Support Forum](https://canvasjs.com/forums/)\r\n\r\n
\r\n\r\n## Installing CanvasJS React Charts\r\nInstall CanvasJS React Charts to your application from npm.\r\n##### Install React Charts via NPM\r\n```\r\nnpm install @canvasjs/react-charts\r\n```\r\nSee [npm documentation](https://docs.npmjs.com/) to know more about npm usage.\r\n\r\n##### Import React Chart Component\r\nImport the React Chart module into your React application.\r\n```\r\nimport CanvasJSReact from '@canvasjs/react-charts';\r\n//var CanvasJSReact = require('@canvasjs/react-charts');\r\n\r\nvar CanvasJSChart = CanvasJSReact.CanvasJSChart;\r\n```\r\n\r\n##### Set the chart-options & create chart\r\nSet the chart-options & use ‘CanvasJSChart’ selector to create the chart.\r\n```\r\nclass App extends Component {\r\n render() {\r\n const options = {\r\n title: {\r\n text: \"Basic Column Chart in React\"\r\n },\r\n data: [{\r\n type: \"column\",\r\n dataPoints: [\r\n { label: \"Apple\", y: 10 },\r\n { label: \"Orange\", y: 15 },\r\n { label: \"Banana\", y: 25 },\r\n { label: \"Mango\", y: 30 },\r\n { label: \"Grape\", y: 28 }\r\n ]\r\n }]\r\n }\r\n \r\n return (\r\n
\r\n this.chart = ref} */\r\n />\r\n
\r\n );\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n\"React\r\n\r\n
\r\n\r\n#### Interactive React Charts\r\n\"React\r\n\r\n
\r\n\r\n#### React Chart with Multiple Y-axes\r\n\"React\r\n\r\n
\r\n\r\n#### React Chart with Zooming / Panning\r\n\"React\r\n\r\n
\r\n\r\n### Related Chart Packages\r\n* [JavaScript Charts](https://www.npmjs.com/package/@canvasjs/charts)\r\n* [Angular Charts](https://www.npmjs.com/package/@canvasjs/angular-charts)\r\n* [Vue Charts](https://www.npmjs.com/package/@canvasjs/vue-charts)\r\n* [jQuery Charts](https://www.npmjs.com/package/@canvasjs/jquery-charts)","readmeFilename":"README.md"}