{"_id":"@canvasjs/react-stockcharts","_rev":"2-eb0edbace17de375abc2fac6cfded72a","name":"@canvasjs/react-stockcharts","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@canvasjs/react-stockcharts","version":"1.0.0","description":"CanvasJS React StockCharts","main":"canvasjs.stock.react.js","keywords":["canvasjs","canvasjs react stockcharts","react stockcharts","canvasjs stockcharts"],"author":{"name":"fenopix"},"license":"MIT","homepage":"https://canvasjs.com/react-charts/#stockcharts","peerDependencies":{"react":">=16.0.0","@canvasjs/stockcharts":"^1.7.5"},"_id":"@canvasjs/react-stockcharts@1.0.0","_nodeVersion":"19.9.0","_npmVersion":"9.6.5","dist":{"integrity":"sha512-SMEiUgJPBo8Vl2YUsNnQFbxg9DBVwAaHkpC7cEm+84s8w+TV0aUG33piOXysaiAI124KY9gr/DxlNax1q+QtXw==","shasum":"e3d7ab1d72af7a21150c75ef8b0a3465e90d1aa4","tarball":"https://registry.npmjs.org/@canvasjs/react-stockcharts/-/react-stockcharts-1.0.0.tgz","fileCount":4,"unpackedSize":10648,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGjgCA55D2xyPg7kvQ52ioENS2bsE3e4Upw+MyiV5pYBAiEA4DqmATCy+9mjdzRm963/7F3qrmDZCCdICCgGl6oalKw="}]},"_npmUser":{"name":"canvasjs","email":"info@canvasjs.com"},"directories":{},"maintainers":[{"name":"canvasjs","email":"info@canvasjs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-stockcharts_1.0.0_1684415662192_0.5237300871106765"},"_hasShrinkwrap":false},"1.0.1":{"name":"@canvasjs/react-stockcharts","version":"1.0.1","description":"CanvasJS React StockCharts","main":"canvasjs.stock.react.js","keywords":["canvasjs","canvasjs react stockcharts","react stockcharts","canvasjs stockcharts"],"author":{"name":"fenopix"},"license":"MIT","homepage":"https://canvasjs.com/react-charts/#stockcharts","peerDependencies":{"react":">=16.0.0","@canvasjs/stockcharts":"^1.7.5"},"_id":"@canvasjs/react-stockcharts@1.0.1","gitHead":"109a71001ec5c1b39eab648c6df753b0164d285a","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-TuCyshQLkVS5JyqnnQASLh4e8RvxyYV5niHUUcR7/nkyxbrVJhFb68fEP3IcJfiMKBU1q9/zWE0gdoyPhkTWBQ==","shasum":"af1bc0fafb4ebe9c754909af9ce1f9b63a8a5bb1","tarball":"https://registry.npmjs.org/@canvasjs/react-stockcharts/-/react-stockcharts-1.0.1.tgz","fileCount":4,"unpackedSize":10698,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEt5CWBeMGyjTJULuDPvoXjmOKfSVysU/i72cAeQQ/bDAiBo0e4c2LJe56KFdmlD5LV2Ry6Obh5uTMBUFztsS3SViA=="}]},"_npmUser":{"name":"canvasjs","email":"info@canvasjs.com"},"directories":{},"maintainers":[{"name":"canvasjs","email":"info@canvasjs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-stockcharts_1.0.1_1708924245662_0.9328000813782908"},"_hasShrinkwrap":false},"1.0.2":{"name":"@canvasjs/react-stockcharts","version":"1.0.2","description":"CanvasJS React StockCharts - Official","main":"canvasjs.stock.react.js","keywords":["react","stockcharts","canvasjs","canvasjs react stockcharts","react stockcharts","canvasjs stockcharts"],"author":{"name":"fenopix"},"license":"MIT","homepage":"https://canvasjs.com/react-charts/#stockcharts","peerDependencies":{"react":">=16.0.0","@canvasjs/stockcharts":"^1.7.5"},"_id":"@canvasjs/react-stockcharts@1.0.2","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-4KowrU35mEJhzXqWL7bc/3mPuwKUEODuhse5ya/Ciuz+vt2LzFeoDQavBBg98JtwUKhfyx3oHJdGLCzhKNHX8w==","shasum":"ca89d1f77bc6fb401579bd384d591a640eb4d1b0","tarball":"https://registry.npmjs.org/@canvasjs/react-stockcharts/-/react-stockcharts-1.0.2.tgz","fileCount":4,"unpackedSize":11129,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzL0PSEiFbDLa+Jh9yAyNeUR73/tP6kxkWvwEpU1mVWAiB9ag/8iOz7bQJZ9guqoZ3cgJGTMTGmm9y1L/m/v27E1A=="}]},"_npmUser":{"name":"canvasjs","email":"info@canvasjs.com"},"directories":{},"maintainers":[{"name":"canvasjs","email":"info@canvasjs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-stockcharts_1.0.2_1709199709229_0.06620968622762069"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-18T13:14:22.111Z","1.0.0":"2023-05-18T13:14:22.422Z","modified":"2024-02-29T09:41:50.087Z","1.0.1":"2024-02-26T05:10:45.824Z","1.0.2":"2024-02-29T09:41:49.401Z"},"maintainers":[{"name":"canvasjs","email":"info@canvasjs.com"}],"description":"CanvasJS React StockCharts - Official","homepage":"https://canvasjs.com/react-charts/#stockcharts","keywords":["react","stockcharts","canvasjs","canvasjs react stockcharts","react stockcharts","canvasjs stockcharts"],"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 StockCharts - Official\r\nCanvasJS [React StockChart](https://canvasjs.com/react-charts/#stockcharts) Component for creating advanced interactive Financial Charts for your react applications. Library supports a wide range of chart types including line, area, candlestick, ohlc, 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 StockCharts Demo](https://canvasjs.com/react-charts/#stockcharts)\r\n- [Download CanvasJS](https://canvasjs.com/download-html5-charting-graphing-library/)\r\n- [React StockCharts Integration](https://canvasjs.com/docs/stockcharts/integration/react/)\r\n- [StockChart Documentation](https://canvasjs.com/docs/stockcharts/basics-of-creating-html5-stockchart/)\r\n- [StockChart Support Forum](https://canvasjs.com/forums/forum/stockchart-support/)\r\n\r\n
\r\n\r\n## Installing CanvasJS React StockChart\r\nInstall CanvasJS React StockCharts to your application from npm.\r\n##### Install React StockChart via NPM\r\n```\r\nnpm install @canvasjs/react-stockcharts\r\n```\r\nSee [npm documentation](https://docs.npmjs.com/) to know more about npm usage.\r\n\r\n##### Import React StockChart Component\r\nImport the React StockChart module into your React application.\r\n```\r\nimport CanvasJSReact from '@canvasjs/react-stockcharts';\r\n//var CanvasJSReact = require('@canvasjs/react-stockcharts');\r\n\r\nvar CanvasJSStockChart = CanvasJSReact.CanvasJSStockChart;\r\n```\r\n\r\n##### Set the stockchart-options & create chart\r\nSet the stockchart-options & use 'CanvasJSStockChart' selector to create stockchart.\r\n```\r\nclass App extends Component {\r\n render() {\r\n const options = {\r\n title: {\r\n text: \"CanvasJS React StockChart\"\r\n },\r\n charts: [{\r\n data: [{\r\n type: \"line\",\r\n dataPoints: [\r\n { x: new Date(\"2018-01-01\"), y: 71 },\r\n { x: new Date(\"2018-02-01\"), y: 55 },\r\n { x: new Date(\"2018-03-01\"), y: 50 },\r\n { x: new Date(\"2018-04-01\"), y: 65 },\r\n { x: new Date(\"2018-05-01\"), y: 95 },\r\n { x: new Date(\"2018-06-01\"), y: 68 },\r\n { x: new Date(\"2018-07-01\"), y: 28 },\r\n { x: new Date(\"2018-08-01\"), y: 34 },\r\n { x: new Date(\"2018-09-01\"), y: 14 },\r\n { x: new Date(\"2018-10-01\"), y: 71 },\r\n { x: new Date(\"2018-11-01\"), y: 55 },\r\n { x: new Date(\"2018-12-01\"), y: 50 },\r\n { x: new Date(\"2019-01-01\"), y: 34 },\r\n { x: new Date(\"2019-02-01\"), y: 50 },\r\n { x: new Date(\"2019-03-01\"), y: 50 },\r\n { x: new Date(\"2019-04-01\"), y: 95 },\r\n { x: new Date(\"2019-05-01\"), y: 68 },\r\n { x: new Date(\"2019-06-01\"), y: 28 },\r\n { x: new Date(\"2019-07-01\"), y: 34 },\r\n { x: new Date(\"2019-08-01\"), y: 65 },\r\n { x: new Date(\"2019-09-01\"), y: 55 },\r\n { x: new Date(\"2019-10-01\"), y: 71 },\r\n { x: new Date(\"2019-11-01\"), y: 55 },\r\n { x: new Date(\"2019-12-01\"), y: 50 }\r\n ]\r\n }]\r\n }],\r\n navigator: {\r\n slider: {\r\n minimum: new Date(\"2018-07-01\"),\r\n maximum: new Date(\"2019-06-30\")\r\n }\r\n }\r\n };\r\n\r\n return (\r\n
\r\n this.stockchart = 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 StockCharts\r\n![React Interactive StockCharts](https://canvasjs.com/wp-content/uploads/images/npm/react/interactive-react-stockcharts.gif)\r\n\r\n
\r\n\r\n### Related StockChart Packages\r\n- [JavaScript StockCharts](https://www.npmjs.com/package/@canvasjs/stockcharts)\r\n- [Angular StockCharts](https://www.npmjs.com/package/@canvasjs/angular-stockcharts)\r\n- [Vue StockCharts](https://www.npmjs.com/package/@canvasjs/vue-stockcharts)\r\n- [jQuery StockCharts](https://www.npmjs.com/package/@canvasjs/jquery-stockcharts)","readmeFilename":"README.md"}