{"_id":"react-native-svg-charts","_rev":"52-4d84a42c0a0b85f079178eb9329e449a","name":"react-native-svg-charts","description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","dist-tags":{"latest":"5.4.0","rc":"2.0.0","test":"3.0.2-test","beta":"4.0.0-beta-2","RC":"5.2.1"},"versions":{"1.0.0":{"name":"react-native-svg-charts","version":"1.0.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"license":"MIT","dependencies":{"art":"^0.10.1","d3-interpolate-path":"2.0.0","d3-array":"^1.2.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"5.4.1"},"devDependencies":{"react":"16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"5.4.1","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"987a15dce6f9bc7542edb2147146c98db614c883","_id":"react-native-svg-charts@1.0.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-zWWyBU6EnmfGL090b4iAWPigD2ngorlG143eacghFHRKSP2Z943jpfgowLc84k2wMiQAVoVYEBCJj8DRTee0Xg==","shasum":"7572f50bc025b42377e46cd3475caea6027c842d","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBjJ61w1ntm2qUZJF761HpG3AdiceqP69SOaKJfl3DPMAiEA8rhZ/1PW+17iGrjXahAebV4vLJiLoFH0AIkCdJhCrDU="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.0.0.tgz_1509356870477_0.17449909821152687"},"directories":{}},"1.1.0":{"name":"react-native-svg-charts","version":"1.1.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"license":"MIT","dependencies":{"art":"^0.10.1","d3-interpolate-path":"2.0.0","d3-array":"^1.2.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"5.4.1"},"devDependencies":{"react":"16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"3e91335a95bf293492225e7bac99b38051d701ef","_id":"react-native-svg-charts@1.1.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-+IOP3UECKT2JWbNBgrLi19tOHk8qQVBgnSdr0YU6fGLuF2GE/7DrR3LDihQAWXfqrdzWZoKsYz/U+J90Z5x/rA==","shasum":"1b20928259fbea92edd455bc79f85b04bbe00bbc","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCd9WgVDeO110aIcpOcxLm25mqzq9Sj2+/ne6TcafmR4gIhALb1JLhCxMEm3wdytzIjhOeGnmP9M7TmqoJzzpwdb+WS"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.1.0.tgz_1509461931704_0.32408419949933887"},"directories":{}},"1.1.1":{"name":"react-native-svg-charts","version":"1.1.1","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"license":"MIT","dependencies":{"d3-interpolate-path":"2.0.0","d3-array":"^1.2.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"react":"16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"700f52d4929a9338ec943e1d786276c90f941d84","_id":"react-native-svg-charts@1.1.1","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-FW599Yy7g+7JEdzxOMSgaWLjMh5dX8iwQuRwFPr3jZavYutziI53dF2RXMqv9sg5CmlRD/+zYd1I5QC2b9ue7A==","shasum":"5f1d4080fcda7532572cb525612eeff2f4618b17","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.1.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICGoaDXjvY6eKP+62iQTpy21juQr5LE9VfphPEFlnB4sAiEAwbyiTUwHVH0J/M0/Xq40i+gW9+wvteFZlB2UPXvFz1Q="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.1.1.tgz_1509462898619_0.07593288784846663"},"directories":{}},"1.1.2":{"name":"react-native-svg-charts","version":"1.1.2","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"license":"MIT","dependencies":{"d3-interpolate-path":"2.0.0","d3-array":"^1.2.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"react":"16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"78c364e62770ca93fd69295480d28771b265d305","_id":"react-native-svg-charts@1.1.2","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-aCv/9I8O+j4PAqLFph3y7f1vK0ggFvd9z8QpbUdmDdd6jPMheJ1h3dHkapWgfvA3asJUrgZrEzL+aHUr8TKiKg==","shasum":"abe03126b37234c3ca1aad93dc5efbc60794f190","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.1.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4kRPvFjbwmolcCoTCOMV6fqPblRTNpBudT6fr2dFXjwIgQZDKZlYd42TAqZtNsUNIFjHMWR+KTbteFMKvdizaH2o="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.1.2.tgz_1509463543485_0.5343857808038592"},"directories":{}},"1.1.3":{"name":"react-native-svg-charts","version":"1.1.3","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"license":"MIT","dependencies":{"d3-interpolate-path":"2.0.0","d3-array":"^1.2.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"react":"16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"0ff54fb1975efa43cd74dce6c1caaef80e3ee39d","_id":"react-native-svg-charts@1.1.3","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-n3AbaKyWq6UQj5BhhtppVRwo9Xmhp3SHsfdNRun6CQNpy/Yv+u/UVgpad3PVIrlY8h170Oh7KTRDqHquFpNZZg==","shasum":"6cc176b829b3a844715d6ab86fdc31aa0522983f","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.1.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCalX5EAkdp84vrKfxTNny0QdArrnTtxuLwjSCiNMmBpAIgSXgcH5sdOa3zJ73Yyc/NbuLUKuf5ePev7fWGIHnQesI="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.1.3.tgz_1509987338982_0.9939389729406685"},"directories":{}},"1.1.4":{"name":"react-native-svg-charts","version":"1.1.4","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-interpolate-path":"2.0.0","d3-array":"^1.2.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"react":"16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"a6d82d7b726025bb8a4641e7889fdabe165f0fd6","_id":"react-native-svg-charts@1.1.4","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-5U5ErtGzX/lrdb0JjSDEJDm3hMwRjo2RIbzNtMAw3k/92zVbV9yHsDZ00r9irwpyZpju+HNVkq+5ptX2zm8NYA==","shasum":"9eb889b4eaed87557e00bf07053e42349fd71cac","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.1.4.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXNMiEHpNdLigFpWm2r0/XqFrwLCmM5/UwzjABhMd8dAIgMzKrVorQibn5CpFACTzpVyc2MSbRlrljU3vMQNN30XE="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.1.4.tgz_1510043450985_0.5407436417881399"},"directories":{}},"1.1.5":{"name":"react-native-svg-charts","version":"1.1.5","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-interpolate-path":"2.0.0","d3-array":"^1.2.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"react":"16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"431bde9f1c13e53e9ca37c63906b0acb60b87fba","_id":"react-native-svg-charts@1.1.5","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-bTTbgdesnBjyowm0IeON3QyrOPn5gZtBeyXUxwvdTf/94Cw3tJ3rc9cPSRKH430zA9TC5PIH+kCVA8OtP9YimA==","shasum":"5b26f71f964edc8e9553475af0995921af0cc20d","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.1.5.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSMgS70YQr3F0+bF3FvG7XCSCiSrvZ3RG/FZ31WfmFIAIhAOh5Hxz9HHwrv3p+RmdXnH2zsEMBi09GZ/62HTUWXId3"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.1.5.tgz_1510043939349_0.575764928245917"},"directories":{}},"1.1.6":{"name":"react-native-svg-charts","version":"1.1.6","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-interpolate-path":"2.0.0","d3-array":"^1.2.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"react":"16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"c14725bf938db0d7fe369685f69fbe7798c49598","_id":"react-native-svg-charts@1.1.6","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-JFZ9asgRVi8NhqaRygr3Ir6BWo3kg35DLJbkrb0S8AFBT10cWH8s7NUSGJkCPQyN8d8uJrDlpnzxmPvIoTfQWw==","shasum":"f2a559a69aaafed7488f73b75d426dc4eb1301f3","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.1.6.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGwiiOrkX2oVnXFtnooSRK/qHKzakGvWmdAqGyT+1txyAiEAgT3gppbtXanMTYcPNFlZVTbgY5E3R9E3WXcE2jTwJK4="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.1.6.tgz_1510052775250_0.09779327875003219"},"directories":{}},"1.2.0":{"name":"react-native-svg-charts","version":"1.2.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"5888e2bfa062d15907f1a4da583cea81d6c70b5c","_id":"react-native-svg-charts@1.2.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-yBgpnaK0OE7edgTZWhZsY2RTHAFki+2yNpVBI5rF0t7K8IWcbjak2sFNyFOrQy3fuC5WUTYaP0H5vO8U7+dglg==","shasum":"746b0663602f4b53472547b2e39d82aaef291436","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.2.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYzEzfanX1dEZV+41EdVTYqKnv1BIiudC9rl19HPpymQIgOcVapM+J4RDPTr9eFJW8YoGa8/MkkONJNXNc3+aKMgM="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.2.0.tgz_1510664696486_0.3618164474610239"},"directories":{}},"1.3.0":{"name":"react-native-svg-charts","version":"1.3.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"d0bca80b891620eedae7813211003d633b59686e","_id":"react-native-svg-charts@1.3.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-DdWUOwYsx7smm4u8RvoJCpSNqivXpF54RcLZVdXYwwiMf3sEghz9En+PJPRP9mOz1pkwa//oBmVNRXYP5G4udw==","shasum":"dd4b63d622ad50211223a9651f30a287c3e12c74","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.3.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEjIMJt8WFeJipzA9WE0DkBaAdsxfXpdgbrxoprn6BsHAiEA3EdxXT6BU24gfGATfMLsKRFxZCwc5bb36HEUoS5TbCA="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.3.0.tgz_1510675470868_0.8233716816175729"},"directories":{}},"1.3.1":{"name":"react-native-svg-charts","version":"1.3.1","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"e3b45c098b35ed4c25f8aadabd105a2934068c82","_id":"react-native-svg-charts@1.3.1","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-MBQ+AnDQOhzrD0/4DNGD5KGJSCAKEpWyDiSiINMWqzbET00oLK5MjHvKawhUyt48mwwSzQP3v6n6m2lP2m8X5g==","shasum":"2dcdbe4412a40384f26afab90e4f83b915759ccf","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.3.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9qUkmNrukq9kli4SrzI8Rlwr3fOipQXVLj9C6FQe1lgIgK4Pc/TMtpo79mrdUhCBW4DeSSaRZssIk3NA/6hgddJ4="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.3.1.tgz_1510676047478_0.9614950055256486"},"directories":{}},"1.3.2":{"name":"react-native-svg-charts","version":"1.3.2","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"bff0dc1010ef85de0f71500632ab8fe88e9c4d04","_id":"react-native-svg-charts@1.3.2","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-kPWGJ0LZze9HO0mFP0FlFdRqvGde0CuQbIp3RRNLkMorcPDVe82Ed2b7y06WKtAh0cBc90n8Pec0y52k9S7Wfg==","shasum":"af54672c107cc11bc264550245a7f144ed86afef","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.3.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTqxN49KabC2f0e/U9DSwrNf5llwZNweVDn24aSBe9XQIhAK08FxBqhfYpwZlprnoSBMhEPFtS1AY2guz7oxqsZajt"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.3.2.tgz_1511165443711_0.7469322881661355"},"directories":{}},"1.4.0":{"name":"react-native-svg-charts","version":"1.4.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"a627ab3a0b59523c4e01ea04a358ce1b76a47381","_id":"react-native-svg-charts@1.4.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-tsmZuemKghDnKr2ruJ6kipuYcunzzrcPtYghMrasZrAnWi7Uiwnl+9jkm0jGondcZeqMkT5LE9cpEl9GwijXCg==","shasum":"688ff378aae778abb8cf89411c519f0953cd874f","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.4.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOhxs/M2wLq3X76Vfl+n8kqOndHpOEk+y/KmqqvuJSlQIhAMo9RYQ7tEwrqNW0SUzf+cAPv1S+ZPkRg7ZpyroLGO8v"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.4.0.tgz_1511171059854_0.4144316460005939"},"directories":{}},"1.4.1":{"name":"react-native-svg-charts","version":"1.4.1","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"b0868b03825d03f5c4f4016545ce7f4e2dd1e58b","_id":"react-native-svg-charts@1.4.1","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-mQszBVft61xpxpGIjLcDoKPVsjkGOObxHJ6AEaTkBOFkYuBMMyaoNDGNaCufdyZjPgKMjCXAt4YWOwdHn051jw==","shasum":"0fc76ab136b9f93ddec5d7f66a742702e1fc0cd4","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.4.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCnMN2t79Ne2g/k9UAsRIBojL6Xlw0CTIkY9UZb2Z1GwIgSRxmgTHDNLRO6EAmk4xSHDQpaxrL//TY7bL6NuWDYcg="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.4.1.tgz_1511272306866_0.870457962853834"},"directories":{}},"1.4.2":{"name":"react-native-svg-charts","version":"1.4.2","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"89a588cbae312fca7ca582519549174d4fc5bb01","_id":"react-native-svg-charts@1.4.2","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-Uj7DgipyuV6GvCE8wfTAepLys73oOimxBxLlWH/+mZRk9lyDA3IZFT0LMvg3JYjRkV4YN8tAGeijjDuHNu1Dkw==","shasum":"66a5d94a0f1a48c5a37c5163fbf1ee8c340f63a4","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.4.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFs/cGCx9YVo3eaKcaiuLx0reyVj77ceA0MDHCjePZdwIhAPv9j+bakHjO5F5ZUAGgdNGn72kDUZlLDEiAtx+s3PVL"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.4.2.tgz_1511868899126_0.7928854648489505"},"directories":{}},"1.5.0":{"name":"react-native-svg-charts","version":"1.5.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"4dda25b54e59bce0d3bc2909487818835335aaeb","_id":"react-native-svg-charts@1.5.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-Iu8qC9ItSj0cjkoMspi3Jzk1NS/ZylpcG49ZxUmFphdoGzkL9ZyoPzCSaXm27MywATnFtxhX7/vkK/1WzsMAqw==","shasum":"b5f26fbe2a794bfb21e1450a92477b39277040b3","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.5.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFn50fyMnbRvDkF6ABZY9KE5YWu6fPBX8xo8gd6K/uN2AiEAiWhno8U6c6/1E95aOf6XJ6Vq0gVMHCoy0lmskzmTyqg="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.5.0.tgz_1511876158608_0.40631437092088163"},"directories":{}},"1.5.1":{"name":"react-native-svg-charts","version":"1.5.1","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"4c044e31b97b38eaaeeb46710c47246150efde83","_id":"react-native-svg-charts@1.5.1","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-asgFunKcUamJ5+EDaZn/l1FR2hIIorJHE75bkz1IdwI8UpvfCoNBeHn2MticttU4HmbNY0dmRZRlGbn4lnE1vw==","shasum":"7cd4e4b6264eb6bd9cdf3e586b516309780a587f","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.5.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAqb+AqjTsPPz7SziapTLLP6vkXuyIrtef4R52D6RdtJAiAtKy4jInk+Hqelo2FvIEsJj1B6n5Ho+gr/qE1Q2a99Pw=="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.5.1.tgz_1511877199766_0.49078821670264006"},"directories":{}},"1.6.0":{"name":"react-native-svg-charts","version":"1.6.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"498ee004b1bc016004fa80b631d08ebf26ffda3f","_id":"react-native-svg-charts@1.6.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-k2l3Foupk/mDaYYbYD+PQSYb4/hRzvqes1XEhvyWQARLnudjEblfqIrCOMG8WKvRKqf1V6BC0f0NwQn6CseaZA==","shasum":"2bf54c2b580fb925a223df50c455be8dbe9f8e0e","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.6.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHzt9Fhbsv2MXTMPHFcseWriphmcmCV9j3+8SIE0AQTVAiBPvibcofPmN2HdjnC/w0ZOYLZe5cYK0H0ZLAupnwzPHQ=="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.6.0.tgz_1511878315887_0.39858491718769073"},"directories":{}},"1.6.1":{"name":"react-native-svg-charts","version":"1.6.1","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"a5803421cb3e340c6ce1557f57315be4fa3623af","_id":"react-native-svg-charts@1.6.1","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-p+s29hnTkWOpmNk/nhCSlD5GlEyvt5fUbY1WeANZ3rzE5TLNfvB78jaau0ZFGFDdoC/keMFfDJpkdKKVfJrByg==","shasum":"7b193c96572a1dcfda1f635fe34ce5cd98a5ffae","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.6.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDI5i1+UjwAvwseibpmF4jCw5V47BZRed2T+32Ll1igCwIhAK8U+6LcGLlcOAECv+tuZrygDu/XpYqBntqquG73SNdv"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.6.1.tgz_1512407957136_0.5619660944212228"},"directories":{}},"2.0.0-rc":{"name":"react-native-svg-charts","version":"2.0.0-rc","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"81de422a2e884a9d5634201455dd8f10412abb9c","_id":"react-native-svg-charts@2.0.0-rc","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-fZwX9gH8P2lpqyGERUVTG1ZqvUiq0Xc6nOfoXwoknuCe1GVZ5rm2fgenyuv7ziwIVWGyXZ66XritYE5RUfNQzg==","shasum":"808b5499dd2e4430453ee3c02d1888bb8381cb7e","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-2.0.0-rc.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAgn+Ymu++vgE8BikWkAB49ULz1GsGCeVn7v/i7LhYVAIgHTbK4CKNWky7OuEdlzHNKJeRmSYPYSKkZJahDAdwBWg="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-2.0.0-rc.tgz_1512735168509_0.3338918818626553"},"directories":{}},"2.0.0":{"name":"react-native-svg-charts","version":"2.0.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"27593479c3e35c2a0baf55da0f95d2b69de967d7","_id":"react-native-svg-charts@2.0.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-QPvl5DxDi8h5bRKojVUJF4J9n8XHCccLruhDQbBStxRm49p6TURvP7vMlKMo02jmlojSYWiu3YkhCKDFKDrJtw==","shasum":"819c21f2dc6462c21828e70da8ae074c7f012952","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-2.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGBL0u7dHUdlERXaQi6L/fa/HaP9BJ6qQBtSap25LWjjAiBLtpUdpoMAy7BbzeLiUHD/Sg40qJtnIYwuQZCk/Egagw=="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-2.0.0.tgz_1512735357508_0.5665642959065735"},"directories":{}},"1.6.2":{"name":"react-native-svg-charts","version":"1.6.2","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"698e3a69b231a67ac24b8d0254ee126248dda7a6","_id":"react-native-svg-charts@1.6.2","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-ABegX2i/RD7bSPKl7drLNz0Ss9EH+f6Ys9YG3F8l2fNCxRNH4q5EhiN45/5vf+E3olcMPDpcRuLH24Eu1ta9Aw==","shasum":"be95232f407474b34544e9f53eefc701564b7f56","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-1.6.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMrvG31NtdAYw00/a7U5lg+gX4FRR9TW9L6WWsDEUp4AIgfAPrSeZnIyRqTvbFE7ZHihz0pPxk1RNWjJTNdfFWplg="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-1.6.2.tgz_1512917724565_0.013248598203063011"},"directories":{}},"2.0.1":{"name":"react-native-svg-charts","version":"2.0.1","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"d2fb04778936af919ac632a91023a899d688beaa","_id":"react-native-svg-charts@2.0.1","_npmVersion":"5.4.2","_nodeVersion":"8.8.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-0KUGPpVhxEDr2A5UzE4BdUS7ksFXm/wFTNuLxq1waBp4d5h2gV3L3lekDHH88xISAHUmxsgcVEEsPEhxj5TS1A==","shasum":"c51941e4981e5bc6992decf53e60c87018932358","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-2.0.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkxl2N5yj/IxG8hJsOtxw+W5SIGQcWrSZoOV9mI0+NzwIgZI1E/lBTlkwBnZ7e7E/TiE1INcTlkwQbmTF2jHRnfVM="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-2.0.1.tgz_1512922618655_0.5274830032140017"},"directories":{}},"2.0.2":{"name":"react-native-svg-charts","version":"2.0.2","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"1f4d92eef2a502db4cadc9511848a92e0c3e83d4","_id":"react-native-svg-charts@2.0.2","_npmVersion":"5.5.1","_nodeVersion":"9.3.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-72vdP0zDdDy8Yiq9hN1Fd812DobD4UPRRGDS6djhjqUfrd4Ikj6VsUAZ5Inx7B18KMm6oaDVeeSbT3opWPOzSg==","shasum":"e05a163f6e3835a847545c65c854f992a60928ff","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-2.0.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHOlhswkVhhhJxqS10CKDWlV/SQ3+4j1XSfvlIEqCaOAIgLRsoxPnTKoG2hJDKsM6Oy0k3OTPpayaZA482U3ybVF8="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-2.0.2.tgz_1515942988501_0.980779281584546"},"directories":{}},"2.1.0":{"name":"react-native-svg-charts","version":"2.1.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"1906b7c9d9781bb2bf182f77cd00011b40213b1d","_id":"react-native-svg-charts@2.1.0","_npmVersion":"5.5.1","_nodeVersion":"9.3.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-2o8T6KU5tAc8VT+7DdmL5tfDnFSbdEJqFAEQGzIhrW48nPHxzHix3/7BOD34wRrNO+w7xOBRK6R7jYzJhN+XIw==","shasum":"e6dff8e92f2454171d6fb5957e1b3f9d80489e69","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-2.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyzyBxk1w6I3Df1RR7HHRNr0z8F7vHZg6TPS9t8XBdsgIhANFY/VvG7ClV9SCm+QBT2RfyFImerxUHff4QVwCxVrVV"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-2.1.0.tgz_1515952170332_0.10597811290062964"},"directories":{}},"2.2.0":{"name":"react-native-svg-charts","version":"2.2.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"0cea67904f7907721b099bd9ce31ca544bfd9031","_id":"react-native-svg-charts@2.2.0","_npmVersion":"5.5.1","_nodeVersion":"9.3.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-JDJEimvR++612p9UMqUrDshnqI4O1QicKvi9kDRpUC0oRhPmUNgRRlWySps7FXSFbmA+kMSWdpNTZ7RpP5lT9A==","shasum":"518aa19df4b5c91a92ac52883953d0dcd2e60c58","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-2.2.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE0imJ9a67frJFI2O4RO99eshzY/H5Y5H3fou9YNubgwAiBg21S7HIGEwq/V48Jkl0J4RYC+P5qcGhF/uCMzudvCCA=="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-2.2.0.tgz_1516791742557_0.05676963203586638"},"directories":{}},"2.2.1":{"name":"react-native-svg-charts","version":"2.2.1","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"bd6f30ac08d32a723d129c7fac695d8559a64539","_id":"react-native-svg-charts@2.2.1","_npmVersion":"5.5.1","_nodeVersion":"9.3.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-Rtd9hn260BeCfUVPA0fbx+wcoqTy3YLLiFjpGlrtX6G9gtZWnkUCBKOM5ZscnWkQJnhQR84kAzTbyGL7FkFZmg==","shasum":"70998fd186fd64aa26a9c6d3c6491da2d8b02280","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-2.2.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDdS4N9hIGVJRuVIchv49FIgNkgA7D8kg3RnVdV/HdfbAiEAxhnyNzKIzlOfhwov6SUCc6uU4ITwhsfoVjtIGedhuSo="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-2.2.1.tgz_1516794097304_0.7112939208745956"},"directories":{}},"2.2.2":{"name":"react-native-svg-charts","version":"2.2.2","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"6c514d68b5e5b0c3b02cc56d9ad98189f7dc5964","_id":"react-native-svg-charts@2.2.2","_npmVersion":"5.5.1","_nodeVersion":"9.3.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-nuqquuBPTXBp7G7Xl2lmnfpj3yUCcCEP9Mp4UGkc6Nl4TZpvMG4o2Y/H1TIYv96i8SQYUhVtM0SIDJQArzEPvQ==","shasum":"4f6e24acac7dc39c8c37f975f825322269d86db1","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-2.2.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3IaG8P5ichJ1dk+t3ihOeV9K98kyq0rbIMR1IwhKOpQIhALGdjuNrEFsmKr7NOXoWtiI0h9pbY3tQiN8JKeEwJitT"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-2.2.2.tgz_1517475789200_0.6472818811889738"},"directories":{}},"3.0.0":{"name":"react-native-svg-charts","version":"3.0.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"54c00c8e657cffd8cc6464d9df88e017d3cde311","_id":"react-native-svg-charts@3.0.0","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-5e4exQGVU2rCbee6Z2Xz/fDRSikq6MePr0jlF1GN5qDKQI9gj9UWqmpbyFDapSnflw1H4s/zwEjMLIeMHvqm8w==","shasum":"1ce143812ea9586af82db25b5d15026b78c31ea0","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-3.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgRWfnedsx7+wo0ZXHO0PGRtqeIjy0lCCEHogR/pGsGQIhAP/9tZnzrqC7UI0EJ5EKaBvG2GoAx88mGfmsfiSuIEwT"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts-3.0.0.tgz_1517766356047_0.26825925637967885"},"directories":{},"deprecated":"this version has been deprecated"},"2.2.3":{"name":"react-native-svg-charts","version":"2.2.3","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^5.4.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.0.0-alpha.12","react-dom":">=16.0.0-alpha.12","react-native":"0.46.0","react-native-svg":"^5.4.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"7a9292431932dd01c66e09369cd2b745a9db536c","_id":"react-native-svg-charts@2.2.3","_npmVersion":"5.5.1","_nodeVersion":"9.3.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-UwhW2G6qzBiOVJWjk/eYGfB+szjMqjEe6x6FlbTitocErqC7XA3BMG8PcJ1O4LUq/5/zUWXksxw3yaN7g1oJBQ==","shasum":"7d359131e9a77274c94d0710fdf9b83c72e246db","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-2.2.3.tgz","fileCount":112,"unpackedSize":1170178,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfpzm5Wd1+NqoZ9EOLfQmia1Wwh0j0upk+RNjMAA5nOAIgFtqR1LFjKyihwMUpwT8btXgqpa34KVSd0vSG9aS58SQ="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_2.2.3_1518021871878_0.8782884730730738"},"_hasShrinkwrap":false},"3.0.1":{"name":"react-native-svg-charts","version":"3.0.1","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","hoist-non-react-statics":"^2.5.0","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native-svg":"^6.2.1","react-native":"0.52.2","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"88550346002988cfcf0471d59202c50eac145ac4","_id":"react-native-svg-charts@3.0.1","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-cmk+O0QMEJmaWmG49gdhAaNV8yyB0LgRCPtqBRUFNHrbO/Pazx4iZ5SGb7iCnwxRZBo4FjXqe0tspX5DxC9Iqw==","shasum":"4eeebe279161738c99df6146f8f73f73965141ad","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-3.0.1.tgz","fileCount":101,"unpackedSize":1204776,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIArBBs9mx9lfjbd24RjRutoekC9s9qffuXA+ckpyG2CfAiBD6KJhg2ee7Q8LTim2IC12LsQB3S+75TvGKk+QyElRow=="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_3.0.1_1518985598951_0.4879947998212284"},"_hasShrinkwrap":false},"3.0.1-test":{"name":"react-native-svg-charts","version":"3.0.1-test","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native-svg":"^6.2.1","react-native":"0.52.2","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"readme":"# react-native-svg-charts\n\n[![version](https://img.shields.io/npm/v/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n[![downloads](https://img.shields.io/npm/dm/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n![circleci](https://circleci.com/gh/JesperLekland/react-native-svg-charts.svg?style=shield&circle-token=1a809ccdfbd0df3ed425a08f09c558401f794140)\n[![license](https://img.shields.io/npm/l/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n\n### version 3 now available!\nBetter API, greater extensibility and customisation!\nA lot of breaking changes are introduced in this version but we've taken great care to make sure migrating is easy. \nSee [releases](https://github.com/JesperLekland/react-native-svg-charts/releases) for more information\n\n\n## Prerequisites\n\nThis library uses [react-native-svg](https://github.com/react-native-community/react-native-svg)\nto render its graphs. Therefore this library needs to be installed **AND** linked into your project to work.\n\nOther than the above dependency this library uses pure javascript and supports both iOS and Android\n\n## Motivation\n\nCreating beautiful graphs in React Native shouldn't be hard or require a ton of knowledge.\nWe use [react-native-svg](https://github.com/react-native-community/react-native-svg) in order to render our SVG's and to provide you with great extensibility.\nWe utilize the very popular [d3](https://d3js.org/) library to create our SVG paths and to calculate the coordinates.\n\nWe built this library to be as extensible as possible while still providing you with the most common charts and data visualization tools out of the box.\nThe Line-, Bar-, Area- and Waterfall -charts can all be extended with \"decorators\" and \"extras\".\nThe `renderDecorator` prop is called on each passed `dataPoint` and allows you to simply add things such as points or other decorators to your charts.\nThe `extras` and `renderExtra` prop is used to further decorate your charts with e.g intersections and projections, see the examples for more info.\n\nFeedback and PR's are more than welcome 🙂\n\n## Running\n\nIf you want to test out the library you can clone this repository and run it.\nWe suggest that you test out the [storybooks](https://github.com/storybooks/storybook) that we've implemented.\nMost of the charts are implemented with [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs) so that you can tweak most properties and see their behavior live.\n\nClone the repo and run the following:\n\n```bash\nyarn\n\n# for iOS\n(cd ios && pod install)\nreact-native run-ios\n\n# for Android\nreact-native run-android\n\nyarn storybook\n\n# and then reload your device\n```\n\n\n\n\n## Common Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of arbitrary data - use prop `xAccessor`/`yAccessor`to tell the chart about the data structure|\n| yAccessor | ({ item }) => item | A function that takes each entry of `data` (named \"item\") as well as the index and returns the y-value of that entry |\n| xAccessor | ({ index }) => index | Same as `yAccessor` but returns the x-value of that entry|\n| yScale | d3Scale.scaleLinear | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand )| \n| xScale | d3Scale.scaleLinear | Same as `yScale` but for the x axis |\n| svg | `{}` | an object containing  all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props)|\n| animate | true | PropTypes.bool |\n| animationDuration | 300 | PropTypes.number |\n| style | undefined | Supports all [ViewStyleProps](https://facebook.github.io/react-native/docs/viewstyleproptypes.html) |\n| curve | d3.curveLinear | A function like [this](https://github.com/d3/d3-shape#curves) |\n| contentInset | { top: 0, left: 0, right: 0, bottom: 0 } | An object that specifies how much fake \"margin\" to use inside of the SVG canvas. This is particularly helpful on Android where `overflow: \"visible\"` isn't supported and might cause clipping. Note: important to have same contentInset on axis's and chart |\n| numberOfTicks | 10 | We use [d3-array](https://github.com/d3/d3-array#ticks) to evenly distribute the grid and dataPoints on the yAxis. This prop specifies how many \"ticks\" we should try to render. Note: important that this prop is the same on both the chart and on the yAxis |\n| showGrid | true | Whether or not to show the grid lines |\n| gridMin | undefined | Normally the graph tries to draw from edge to edge within the view bounds. Using this prop will allow the grid to reach further than the actual dataPoints. [Example](#gridmin/max) |\n| gridMax | undefined | The same as \"gridMin\" but will instead increase the grids maximum value |\n| renderGrid | `Grid.Horizontal` | A function that returns the component to be rendered as the grid |\n| extras | undefined | An array of whatever data you want to render. Each item in the array will call `renderExtra`. [See example](#extras) |\n| renderDecorator | `() => {}`| Called once for each entry in `dataPoints` and expects a component. Use this prop to render e.g points (circles) on each data point. [See example](#decorator) |\n| renderGrid | `defaultGrid`| A function that renders the grid, see source for argumments |\n\n## Components\n\nThis library currently provides the following components\n* [Area](#areachart)\n* [StackedAreaChart](#stackedareachart)\n* [Bar](#barchart)\n* [StackedBarChart](#stackedbarchart)\n* [Line](#linechart)\n* [Pie](#piechart)\n* [Progress- Circle / Gauge](#progresschart)\n* [YAxis](#yaxis)\n* [XAxis](#xaxis)\n\nAlso see [other examples](#other-examples)\n* [Gradient](#gradient)\n* [Decorator](#decorator)\n* [Extras](#extras)\n* [GridMin/Max](#gridminmax)\n* [Layered Charts](#layered-charts)\n* [PieChart with labels](#piechart-with-labels)\n* [Custom Grid](#custom-grid)\n* [Partial Chart](#partial-charts)\n\n### AreaChart\n\n![Area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-chart.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { AreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass AreaChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <AreaChart\n                style={ { height: 200 } }\n                data={ data }\n                contentInset={ { top: 30, bottom: 30 } }\n                curve={shape.curveNatural}\n                svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}\n            />\n        )\n    }\n}\n```\n\n#### Props\n\nSee [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| start | 0 | The value of which the area should start (will always end on the data point)  |\n\n### StackedAreaChart\n\nVery similar to an area chart but with multiple sets of data stacked together. Notice that the `dataPoints` prop has changed to `data` and have a different signature.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\nSee [Area stack chart with Y axis](#area-stack-chart-with-yaxis) to see how to use a YAxis with this component\n\n![Stacked area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-stack.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { StackedAreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass StackedAreaExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#8800cc', '#aa00ff', '#cc66ff', '#eeccff' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <StackedAreaChart\n                style={ { height: 200, paddingVertical: 16 } }\n                data={ data }\n                keys={ keys }\n                colors={ colors }\n                curve={ shape.curveNatural }\n                showGrid={ false }\n            />\n        )\n    }\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries  |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n### BarChart\n![Bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-chart.png)\n\n#### Example (single set data)\n```javascript\nimport React from 'react'\nimport { BarChart } from 'react-native-svg-charts'\n\nclass BarChartExample extends React.PureComponent {\n\n    render() {\n\n        const data    = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n        const barData = [\n            {\n                values: data,\n                positive: {\n                    fill: fillColor,\n                    // other react-native-svg supported props\n                },\n                negative: {\n                    fill: fillColorNegative,\n                    // other react-native-svg supported props\n                },\n            },\n        ]\n\n        return (\n            <BarChart\n                style={ { height: 200 } }\n                data={ barData }\n                contentInset={ { top: 30, bottom: 30 } }\n            />\n        )\n    }\n\n}\n\n```\n\n![Grouped bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/grouped-bar-chart.png)\n\n#### Example (multiple set data - grouped)\n```javascript\nimport React from 'react'\nimport { BarChart } from 'react-native-svg'\n\nclass GroupedBarChartExample extends React.PureComponent {\n\n    render() {\n\n        const data1 = [ 14, -1, 100, -95, -94, -24, -8, 85, -91, 35, -53, 53, -78, 66, 96, 33, -26, -32, 73, 8 ]\n        const data2 = [ 24, 28, 93, 77, -42, -62, 52, -87, 21, 53, -78, -62, -72, -6, 89, -70, -94, 10, 86, 84 ]\n\n        const barData = [\n            {\n                values: data1,\n                positive: {\n                    fill: 'rgb(134, 65, 244)',\n                },\n                negative: {\n                    fill: 'rgba(134, 65, 244, 0.2)',\n                },\n            },\n            {\n                values: data2,\n                positive: {\n                    fill: 'rgb(244, 115, 65)',\n                },\n                negative: {\n                    fill: 'rgb(244, 115, 65, 0.2)',\n                },\n            },\n        ]\n\n        return (\n            <BarChart\n                style={ { height: 200 } }\n                data={ barData }\n                contentInset={ { top: 30, bottom: 30 } }\n            />\n        )\n    }\n\n}\n\n```\n\n### Props\nAlso see [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | Slightly different than other charts since we allow for grouping of bars. This array should contain at least one object with the following shape `{values: array, positive: object, negative: object}` where `positive` and `negative` are objects that contain [svg props](https://github.com/react-native-community/react-native-svg#common-props) to be used depending on the value of the bar  |\n| spacing | 0.05 | Spacing between the bars (or groups of bars). Percentage of one bars width. Default = 5% of bar width |\n| contentInset | `{ top: 0, left: 0, right: 0, bottom: 0 }` | PropTypes.shape |\n\n### StackedBarChart\n\nThe same as the [StackedAreaChart](#stackedareachart) except with bars.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\n\n![Stacked bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { StackedBarChart } from 'react-native-svg-charts'\n\nclass StackedBarChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n                oranges: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#7b4173', '#a55194', '#ce6dbd', '#de9ed6' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <StackedBarChart\n                style={ { height: 200 } }\n                keys={ keys }\n                colors={ colors }\n                data={ data }\n                showGrid={ false }\n                contentInset={ { top: 30, bottom: 30 } }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries  |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n### LineChart\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/line-chart.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { LineChart } from 'react-native-svg-charts'\n\nclass LineChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <LineChart\n                style={ { height: 200 } }\n                data={ data }\n                svg={{ stroke: 'rgb(134, 65, 244)' }}\n                contentInset={ { top: 20, bottom: 20 } }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\nSee [Common Props](#common-props)\n\n### PieChart\n![Pie chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/pie-chart.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { PieChart } from 'react-native-svg-charts'\n\nclass PieChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const randomColor = () => ('#' + (Math.random() * 0xFFFFFF << 0).toString(16) + '000000').slice(0, 7)\n\n        const pieData = data\n            .filter(value => value > 0)\n            .map((value, index) => ({\n                value,\n                color: randomColor(),\n                key: `pie-${index}`,\n                onPress: () => console.log(`${index} slice pressed`),\n            }))\n\n        return (\n            <PieChart\n                style={ { height: 200 } }\n                data={ pieData }\n            />\n        )\n    }\n\n}\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | Slightly different than `dataPoints` because we allow for custom coloring of slices and onPress callback. The array should contain objects of the following shape: `{key: 'string|number', color: 'string', value: 'number', onPress?: function}` |\n| outerRadius | \"100%\" | The outer radius, use this to tweak how close your pie is to the edge of it's container. Takes either percentages or absolute numbers (pixels) |\n| innerRadius | \"50%\" | The inner radius, use this to create a donut. Takes either percentages or absolute numbers (pixels) |\n| labelRadius | undefined | The radius of the circle that will help you layout your labels. Takes either percentages or absolute numbers (pixels) |\n| padAngle | |  The angle between the slices |\n| renderDecorator | `() => {}` | PropTypes.func |\n| sort | `(a,b) => b.value - a.value` | Like any normal sort function it expects either 0, a positive or negative return value. The arguments are each an object from the `dataPoints` array |\n\n\n### ProgressCircle\n![Progress circle](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/progress-circle.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { ProgressCircle }  from 'react-native-svg-charts'\n\nclass ProgressCircleExample extends React.PureComponent {\n\n    render() {\n\n        return (\n            <ProgressCircle\n                style={ { height: 200 } }\n                progress={ 0.7 }\n                progressColor={'rgb(134, 65, 244)'}\n            />\n        )\n    }\n\n}\n\n```\n\n\n![Progress gauge](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/progress-gauge.png)\n\n#### Example (Gauge variant)\n```javascript\nimport React from 'react'\nimport { ProgressCircle } from 'react-native-svg-charts'\n\nclass ProgressGaugeExample extends React.PureComponent {\n\n    render() {\n\n        return (\n            <ProgressCircle\n                style={ { height: 200 } }\n                progress={ 0.7 }\n                progressColor={ 'rgb(134, 65, 244)' }\n                startAngle={ -Math.PI * 0.8 }\n                endAngle={ Math.PI * 0.8 }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| progress | **required** | PropTypes.number.isRequired |\n| progressColor | 'black' | PropTypes.any |\n| startAngle | `0` | PropTypes.number |\n| endAngle | `Math.PI * 2` |  PropTypes.number |\n\n### YAxis\n\n![Y-axis](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/y-axis.png)\n\nA helper component to layout your Y-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the YAxis has the same vertical contentInset.\n\n#### Example\n```javascript\nimport React from 'react'\nimport { LineChart, YAxis } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass YAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const contentInset = { top: 20, bottom: 20 }\n\n        return (\n            <View style={ { height: 200, flexDirection: 'row' } }>\n                <YAxis\n                  data={data}\n                  contentInset={ contentInset }\n                  svg={{\n                      fill: 'grey',\n                      fontSize: 10,\n                  }}\n                  formatLabel={ value => `${value}ºC` }\n                />\n                <LineChart\n                    style={ { flex: 1, marginLeft: 16 } }\n                    data={data}\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                    contentInset={ contentInset }\n                />\n            </View>\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n(see [Common Props](#common-props))\n\n| Property | Default | Description |\n| --- | --- | --- |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `yScale` |\n| svg | `{}` | supports all svg props an svg text normally supports |\n| formatLabel | `value => {}` | A utility function to format the text before it is displayed, e.g `value => \"$\" + value |\n| contentInset | { top: 0, bottom: 0 } | Used to sync layout with chart (if same prop used there) |\n| min | undefined | Used to sync layout with chart (if gridMin is used there) |\n| max | undefined | Used to sync layout with chart (if gridMax is used there) |\n\n\n### XAxis\n\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/x-axis.png)\n\nA helper component to layout your X-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the YAxis has the same horizontal contentInset.\n\n#### Example\n```javascript\nimport React from 'react'\nimport { LineChart, XAxis } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass XAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <View style={{ height: 200, padding: 20 }}>\n                <LineChart\n                    style={{ flex: 1 }}\n                    data={data}\n                    gridMin={0}\n                    contentInset={{ top: 10, bottom: 10 }}\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                />\n                <XAxis\n                    style={{ marginHorizontal: -10 }}\n                    data={ data }\n                    formatLabel={ (value, index) => index }\n                    contentInset={{ left: 10, right: 10 }}\n                    svg={{ fontSize: 10 }}\n                />\n            </View>\n        )\n    }\n}\n\n```\n\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| values | **required** | An array of values to render on the xAxis. Should preferably have the same length as the chart's dataPoints. |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `xScale` |\n| spacing | 0.05 | Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacing` prop on the actual BarChart.   |\n| svg | `{}` | supports all svg props an svg text normally supports |\n| formatLabel | `(value, index) => index}` | A utility function to format the text before it is displayed, e.g `value => \"day\" + value |\n| contentInset | { left: 0, right: 0 } | Used to sync layout with chart (if same prop used there) |\n\n\n\n## Other Examples\n\n### Gradient\nGradients are supported by the `AreaChart`, `LineChart` and `BarChart` and is used with the `renderGradient` prop according to the example below.\n`renderGradient` is similar to `renderDecorator` and `renderExtra`. To get more information on exactly what arguments are passed take a look in the source code (shouldn't be too complicated)\nYou can read more about the available gradients [here](https://github.com/react-native-community/react-native-svg#lineargradient)\n\n![Gradient AreaChart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/gradient.png)\n![Gradient LineChart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/gradient-line.png)\n![Gradient BarChart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/gradient-bar.png)\n\n```javascript\nimport React from 'react'\nimport { AreaChart } from 'react-native-svg-charts'\nimport { Defs, LinearGradient, Stop } from 'react-native-svg'\n\nclass GradientExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const Gradient = ({ index }) => (\n            <Defs key={index}>\n                <LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>\n                    <Stop offset={'0%'} stopColor={'rgb(134, 65, 244)'} stopOpacity={0.8}/>\n                    <Stop offset={'100%'} stopColor={'rgb(134, 65, 244)'} stopOpacity={0.2}/>\n                </LinearGradient>\n            </Defs>\n        )\n\n        return (\n            <AreaChart\n                style={{ height: 200 }}\n                data={data}\n                contentInset={{ top: 20, bottom: 20 }}\n                extras={[ Gradient ]}\n                svg={{ fill: 'url(#gradient)' }}\n            />\n        )\n    }\n\n}\n\n```\n\n### Decorator\n\nThe `renderDecorator` prop allow for decorations on each of the provided data points. The `renderDecorator` is very similar to the `renderItem` of a [FlatList](https://facebook.github.io/react-native/docs/flatlist.html)\nand is a function that is called with an object as an arguments to help the layout of the extra decorator. The content of the argument object is as follows:\n\n```javascript\n{\n    value: number, // the value of the data points. Pass to y function to get y coordinate of data point\n    index: number, // the index of the data points. Pass to x function to get x coordinate of data point\n    x: function, // the function used to calculate the x coordinate of a specific data point index\n    y: function, // the function used to calculate the y coordinate of a specific data point value\n}\n```\n\nRemember that all components returned by `renderDecorator` must be one that is renderable by the [`<Svg/>`](https://github.com/react-native-community/react-native-svg#svg) element, i.e all components supported by [react-native-svg](https://github.com/react-native-community/react-native-svg)\n\n![Decorator](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/decorators.png)\n\n```javascript\nimport React from 'react'\nimport { AreaChart } from 'react-native-svg-charts'\nimport { Circle } from 'react-native-svg'\n\nclass DecoratorExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <AreaChart\n                style={ { height: 200 } }\n                data={ data }\n                svg={ { fill: 'rgba(134, 65, 244, 0.2)' } }\n                contentInset={ { top: 20, bottom: 30 } }\n                renderDecorator={ ({ x, y, index, value }) => (\n                    <Circle\n                        key={ index }\n                        cx={ x(index) }\n                        cy={ y(value) }\n                        r={ 4 }\n                        stroke={ 'rgb(134, 65, 244)' }\n                        fill={ 'white' }\n                    />\n                ) }\n            />\n        )\n    }\n\n}\n```\n### Extras\nThe `extras` prop allow for arbitrary decorators on your chart.\nand is a function that is called with an object as an arguments to help the layout of the extra decorator. The content of the argument object is as follows:\n\n```javascript\n{\n    item: any, // the entry of the 'extras' array\n    x: function, // the function used to calculate the x coordinate of a specific data point index\n    y: function, // the function used to calculate the y coordinate of a specific data point value\n    index: number, // the index of the item in the 'extras' array\n    width: number, // the width of the svg canvas,\n    height: number, // the number fo the svg canvas,\n}\n```\nThere might be additional parameters sent to the `extras` functions as well, depending on the chart type.\n\nThe `LineChart` passes the svg path data that rendered the line. (argument name `line`)\n\nThe `AreaChart` passes both the area svg path as well as the \nsvg path for the line following the upper bounds of the area. \n(argument name `area` and `line` respectively)\n\nSee [Partial Chart](#partial-chart) for use case for this.\n\nRemember that all components returned by an `extras` function must be one that is renderable by the [`<Svg/>`](https://github.com/react-native-community/react-native-svg#svg) element, i.e all components supported by [react-native-svg](https://github.com/react-native-community/react-native-svg)\n\n![Extras](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/extras.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { LineChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\nimport { Circle, G, Line, Rect, Text } from 'react-native-svg'\n\nclass ExtrasExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        /**\n         * Both below functions should preferably be their own React Components\n         */\n\n        const HorizontalLine = (({ y }) => (\n            <Line\n                key={ 'zero-axis' }\n                x1={ '0%' }\n                x2={ '100%' }\n                y1={ y(50) }\n                y2={ y(50) }\n                stroke={ 'grey' }\n                strokeDasharray={ [ 4, 8 ] }\n                strokeWidth={ 2 }\n            />\n        ))\n\n        const Tooltip = ({ x, y }) => (\n            <G\n                x={ x(5) - (75 / 2) }\n                key={ 'tooltip' }\n                onPress={ () => console.log('tooltip clicked') }\n            >\n                <G y={ 50 }>\n                    <Rect\n                        height={ 40 }\n                        width={ 75 }\n                        stroke={ 'grey' }\n                        fill={ 'white' }\n                        ry={ 10 }\n                        rx={ 10 }\n                    />\n                    <Text\n                        x={ 75 / 2 }\n                        dy={20}\n                        alignmentBaseline={'middle'}\n                        textAnchor={ 'middle' }\n                        stroke={ 'rgb(134, 65, 244)' }\n                    >\n                        { `${data[5]}ºC` }\n                    </Text>\n                </G>\n                <G x={ 75 / 2 }>\n                    <Line\n                        y1={ 50 + 40 }\n                        y2={ y(data[ 5 ]) }\n                        stroke={ 'grey' }\n                        strokeWidth={ 2 }\n                    />\n                    <Circle\n                        cy={ y(data[ 5 ]) }\n                        r={ 6 }\n                        stroke={ 'rgb(134, 65, 244)' }\n                        strokeWidth={2}\n                        fill={ 'white' }\n                    />\n                </G>\n            </G>\n        )\n\n        return (\n            <LineChart\n                style={ { height: 200 } }\n                data={ data }\n                svg={{\n                    stroke: 'rgb(134, 65, 244)',\n                    strokeWidth: 2,\n                }}\n                contentInset={ { top: 20, bottom: 20 } }\n                curve={ shape.curveLinear }\n                extras={ [ HorizontalLine, Tooltip ] }\n            />\n        )\n    }\n\n}\n```\n\n### gridMin/Max\nCharts normally render edge to edge, if this is not the wanted behaviour it can easily be altered with the `gridMin` and `gridMax` props. Just compare the below example with the example for the regular [AreaChart](#areachart)\n\n![Grid Min Max](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/grid-min-max.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { AreaChart, Path } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass GridMinMaxExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <AreaChart\n                style={{ height: 200 }}\n                data={data}\n                svg={{ fill: 'rgba(134, 65, 244, 0.2)' }}\n                curve={shape.curveNatural}\n                gridMax={500}\n                gridMin={-500}\n                extras={[\n                    ({ line }) => (\n                        <Path\n                            key={'line '}\n                            d={line}\n                            stroke={'rgb(134, 65, 244)'}\n                            fill={'none'}\n                        />\n                    ),\n                ]}\n            />\n        )\n    }\n\n}\n```\n\n### StackedAreaChart with YAxis\nSince the `<StackedAreaChart>` uses a different data structure and can be affected by both the `order` and `offset` prop it's not obvious how to extra the dataPoints for the YAxis.\nThe remedy this the AreaStackChart exposes a static API with a function `extractDataPoints` where you must pass in the same `data`,  `keys` ( as well as  `order` and `offset` if other than default is used) as the props to the component itself\n\n![Area stack chart with YAxis](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-stack-with-y-axis.png)\n\n```javascript\nimport React from 'react'\nimport { StackedAreaChart, YAxis } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\nimport { View } from 'react-native'\n\nclass AreaStackWithAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ 'rgb(138, 0, 230, 0.8)', 'rgb(173, 51, 255, 0.8)', 'rgb(194, 102, 255, 0.8)', 'rgb(214, 153, 255, 0.8)' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <View style={ { flexDirection: 'row', height: 200 } }>\n                <StackedAreaChart\n                    style={ { flex: 1 } }\n                    contentInset={ { top: 10, bottom: 10 } }\n                    data={ data }\n                    keys={ keys }\n                    colors={ colors }\n                    curve={ shape.curveNatural }\n                    { ...this.props }\n                />\n                <YAxis\n                    style={ { position: 'absolute', top: 0, bottom: 0 }}\n                    data={ StackedAreaChart.extractDataPoints(data, keys) }\n                    contentInset={ { top: 10, bottom: 10 } }\n                    svg={ {\n                        fontSize: 8,\n                        fill: 'white',\n                        stroke: 'black',\n                        strokeWidth: 0.1,\n                        alignmentBaseline: 'baseline',\n                        baselineShift: '3',\n                    } }\n                />\n            </View>\n        )\n    }\n}\n\n```\n\n### Layered Charts\nThis library supports layering/composing out of the box with simple styling. As long as the layered charts share the same container and are correctly positioned everything will work as expected.\nIf your data sets don't share the same max/min data make sure to utilize the `gridMin/gridMax` prop to align the charts.\n\n![Stacked Charts](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/stacked-charts.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { AreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\nimport { StyleSheet, View } from 'react-native'\n\nclass LayeredChartsExample extends React.PureComponent {\n\n    render() {\n\n        const data  = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n        const data2 = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ].reverse()\n\n        return (\n            <View style={ { height: 200 } }>\n                <AreaChart\n                    style={ { flex: 1 } }\n                    data={ data }\n                    svg={{ fill: 'rgba(134, 65, 244, 0.5)' }}\n                    contentInset={ { top: 20, bottom: 20 } }\n                    curve={ shape.curveNatural }\n                />\n                <AreaChart\n                    style={ StyleSheet.absoluteFill }\n                    data={ data2 }\n                    svg={{ fill: 'rgba(34, 128, 176, 0.5)' }}\n                    contentInset={ { top: 20, bottom: 20 } }\n                    curve={ shape.curveNatural }\n                />\n            </View>\n        )\n    }\n\n}\n```\n\n### PieChart with labels\nThe PieChart as well as most of the charts support decorators.\nIn the case of the PieChart you get `pieCentroid` and `labelCentroid` instead of the `x` and `y` as arguments in the `renderDecorator` callback.\nThis will allow you to render labels aligned with your pie slices. Experiment with `outerRadius` and `labelRadius` to layout your labels in relation to your chart\n\n![PieChart with labels](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/pie-chart-with-labels.png)\n\n### Example\n```javascript\nimport React from 'react'\nimport { PieChart } from 'react-native-svg-charts'\nimport { Circle, G, Line } from 'react-native-svg'\n\nclass PieChartWithLabelExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91 ]\n\n        const randomColor = () => ('#' + (Math.random() * 0xFFFFFF << 0).toString(16) + '000000').slice(0, 7)\n\n        const pieData = data\n            .filter(value => value > 0)\n            .map((value, index) => ({\n                value,\n                color: randomColor(),\n                key: `pie-${index}`,\n            }))\n\n        return (\n            <PieChart\n                style={ { height: 200 } }\n                data={ pieData }\n                spacing={ 0 }\n                innerRadius={ 20 }\n                outerRadius={ 55 }\n                labelRadius={ 80 }\n                renderDecorator={ ({ item, pieCentroid, labelCentroid, index }) => (\n                    <G key={ index }>\n                        <Line\n                            x1={ labelCentroid[ 0 ] }\n                            y1={ labelCentroid[ 1 ] }\n                            x2={ pieCentroid[ 0 ] }\n                            y2={ pieCentroid[ 1 ] }\n                            stroke={ item.color }\n                        />\n                        <Circle\n                            cx={ labelCentroid[ 0 ] }\n                            cy={ labelCentroid[ 1 ] }\n                            r={ 15 }\n                            fill={ item.color }\n                        />\n                    </G>\n                ) }\n\n            />\n        )\n    }\n\n}\n```\n\n\n### Custom grid\nThe default grid is just a collection of horizontal `Line`s. If you simply want to change the direction or styling look at the `renderGrid` & `gridProps` prop.\nSome projects might require more control of the grid ( direction, different distributions etc), therefore all affected components support the `renderGrid` prop.\nThe `renderGrid` prop takes a function and provides the `x`, `y`, `ticks` and `dataPoints` arguments. Use them as in the example below\n\n![Custom grid](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/custom-grid.png)\n\n### Example\n```javascript\nimport React from 'react'\nimport { LineChart } from 'react-native-svg-charts'\nimport { View } from 'react-native'\nimport { G, Line } from 'react-native-svg'\n\nclass CustomGridExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const CustomGrid = ({ x, y, data, ticks }) => (\n            <G>\n                {\n                    // Horizontal grid\n                    ticks.map(tick => (\n                        <Line\n                            key={ tick }\n                            x1={ '0%' }\n                            x2={ '100%' }\n                            y1={ y(tick) }\n                            y2={ y(tick) }\n                            stroke={ 'rgba(0,0,0,0.2)' }\n                        />\n                    ))\n                }\n                {\n                    // Vertical grid\n                    data.map((_, index) => (\n                        <Line\n                            key={ index }\n                            y1={ '0%' }\n                            y2={ '100%' }\n                            x1={ x(index) }\n                            x2={ x(index) }\n                            stroke={ 'rgba(0,0,0,0.2)' }\n                        />\n                    ))\n                }\n            </G>\n        )\n\n        return (\n            <View style={ { height: 200, flexDirection: 'row' } }>\n                <LineChart\n                    style={ { flex: 1 } }\n                    data={ data }\n                    svg={ {\n                        stroke: 'rgb(134, 65, 244)',\n                    } }\n                    renderGrid={ CustomGrid }\n                />\n            </View>\n        )\n    }\n\n}\n\n```\n\n### Partial Charts\nHere's another example of how the `extras` property can be used to create highly customizable charts. \n\n![Partial Charts](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/partial-charts.png)\n\n### Example (LineChart)\n```javascript\nimport React from 'react'\nimport { ClipPath, Defs, Rect } from 'react-native-svg'\nimport { LineChart, Path } from 'react-native-svg-charts'\n\nclass PartialLineChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const indexToClipFrom = 10\n\n        const Clips = ({ x, width }) => (\n            <Defs key={'clips'}>\n                <ClipPath id=\"clip-path-1\">\n                    <Rect x={'0'} y={'0'} width={x(indexToClipFrom)} height={'100%'}/>\n                </ClipPath>\n                <ClipPath id={'clip-path-2'}>\n                    <Rect x={x(indexToClipFrom)} y={'0'} width={width - x(indexToClipFrom)} height={'100%'}/>\n                </ClipPath>\n            </Defs>\n        )\n\n        // Line extras:\n        const DashedLine = ({ line }) => (\n            <Path\n                key={'line-1'}\n                d={line}\n                stroke={'rgb(134, 65, 244)'}\n                strokeWidth={2}\n                fill={'none'}\n                strokeDasharray={[ 4, 4 ]}\n                clipPath={'url(#clip-path-2)'}\n            />\n        )\n\n        const Shadow = ({ line }) => (\n            <Path\n                y={3}\n                key={'shadow-1'}\n                d={line}\n                stroke={'rgba(134, 65, 244, 0.2)'}\n                strokeWidth={5}\n                fill={'none'}\n            />\n        )\n\n        return (\n            <LineChart\n                style={{ height: 200 }}\n                data={data}\n                contentInset={{ top: 20, bottom: 20 }}\n                svg={{\n                    stroke: 'rgb(134, 65, 244)',\n                    strokeWidth: 2,\n                    clipPath: 'url(#clip-path-1)',\n                }}\n                extras={[\n                    Clips,\n                    Shadow,\n                    DashedLine,\n                ]}\n            />\n        )\n    }\n}\n\n```\n\n### Example (AreaChart)\n```javascript\nimport React from 'react'\nimport { ClipPath, Defs, LinearGradient, Rect, Stop } from 'react-native-svg'\nimport { AreaChart, Path } from 'react-native-svg-charts'\n\nclass PartialAreaChartExample extends React.PureComponent {\n    render() {\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const indexToClipFrom = 10\n\n        const Gradient = () => (\n            <Defs key={'defs'}>\n                <LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>\n                    <Stop offset={'0%'} stopColor={'rgb(134, 65, 244)'} stopOpacity={0.8}/>\n                    <Stop offset={'100%'} stopColor={'rgb(134, 65, 244)'} stopOpacity={0.2}/>\n                </LinearGradient>\n            </Defs>\n        )\n\n        const Clips = ({ x, width }) => (\n            <Defs key={'clips'}>\n                <ClipPath id={'clip-path-1'} key={'0'}>\n                    <Rect x={0} y={'0'} width={x(indexToClipFrom)} height={'100%'}/>\n                </ClipPath>\n                <ClipPath id=\"clip-path-2\" key={'1'}>\n                    <Rect x={x(indexToClipFrom)} y={'0'} width={width - x(indexToClipFrom)} height={'100%'}/>\n                </ClipPath>\n            </Defs>\n        )\n\n        const Line = ({ line }) => (\n            <Path\n                key={'line'}\n                d={line}\n                stroke={'green'}\n                fill={'none'}\n                clipPath={'url(#clip-path-1)'}\n            />\n        )\n\n        const DashedLine = ({ line }) => (\n            <Path\n                key={'dashed-line'}\n                stroke={'green'}\n                d={line}\n                fill={'none'}\n                clipPath={'url(#clip-path-2)'}\n                strokeDasharray={[ 4, 4 ]}\n            />\n        )\n\n        return (\n            <AreaChart\n                style={{ height: 200 }}\n                data={data}\n                contentInset={{ top: 30, bottom: 30 }}\n                svg={{\n                    fill: 'url(#gradient)',\n                    clipPath: 'url(#clip-path-1)',\n                }}\n                extras={[\n                    Gradient,\n                    Clips,\n                    Line,\n                    DashedLine,\n                ]}\n            />\n        )\n    }\n}\n\n```\n\n## License\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"b26c3b05c753473b34cdb1895794f276d4fbcc63","_id":"react-native-svg-charts@3.0.1-test","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-QQRBU1m3SiPeMh8GHB7icjTXZ4SxuAVNTOSIRrCYZdixItZefGpKvU4lzNOfD0o4Hnyv43nl60WLp5SPJqXzsw==","shasum":"728f5aba907556a9fc0c2790dbe8220d68e5cc8f","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-3.0.1-test.tgz","fileCount":31,"unpackedSize":194889,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICkEbyZZncvL/pNspkIJgF+5e5G0Ld3xL/0/+IXvOhS0AiEApYcAPSzkCZJnU6JBQ2xBQsZZwSEjHy/qASO+LQq+d2s="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_3.0.1-test_1519565407647_0.42620086405655755"},"_hasShrinkwrap":false},"3.0.2-test":{"name":"react-native-svg-charts","version":"3.0.2-test","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native-svg":"^6.2.1","react-native":"0.52.2","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"readme":"# react-native-svg-charts\n\n[![version](https://img.shields.io/npm/v/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n[![downloads](https://img.shields.io/npm/dm/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n![circleci](https://circleci.com/gh/JesperLekland/react-native-svg-charts.svg?style=shield&circle-token=1a809ccdfbd0df3ed425a08f09c558401f794140)\n[![license](https://img.shields.io/npm/l/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n\n### version 3 now available!\nBetter API, greater extensibility and customisation!\nA lot of breaking changes are introduced in this version but we've taken great care to make sure migrating is easy. \nSee [releases](https://github.com/JesperLekland/react-native-svg-charts/releases) for more information\n\n\n## Prerequisites\n\nThis library uses [react-native-svg](https://github.com/react-native-community/react-native-svg)\nto render its graphs. Therefore this library needs to be installed **AND** linked into your project to work.\n\nOther than the above dependency this library uses pure javascript and supports both iOS and Android\n\n## Motivation\n\nCreating beautiful graphs in React Native shouldn't be hard or require a ton of knowledge.\nWe use [react-native-svg](https://github.com/react-native-community/react-native-svg) in order to render our SVG's and to provide you with great extensibility.\nWe utilize the very popular [d3](https://d3js.org/) library to create our SVG paths and to calculate the coordinates.\n\nWe built this library to be as extensible as possible while still providing you with the most common charts and data visualization tools out of the box.\nThe Line-, Bar-, Area- and Waterfall -charts can all be extended with \"decorators\" and \"extras\".\nThe `renderDecorator` prop is called on each passed `dataPoint` and allows you to simply add things such as points or other decorators to your charts.\nThe `extras` and `renderExtra` prop is used to further decorate your charts with e.g intersections and projections, see the examples for more info.\n\nFeedback and PR's are more than welcome 🙂\n\n## Running\n\nIf you want to test out the library you can clone this repository and run it.\nWe suggest that you test out the [storybooks](https://github.com/storybooks/storybook) that we've implemented.\nMost of the charts are implemented with [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs) so that you can tweak most properties and see their behavior live.\n\nClone the repo and run the following:\n\n```bash\nyarn\n\n# for iOS\n(cd ios && pod install)\nreact-native run-ios\n\n# for Android\nreact-native run-android\n\nyarn storybook\n\n# and then reload your device\n```\n\n\n\n\n## Common Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of arbitrary data - use prop `xAccessor`/`yAccessor`to tell the chart about the data structure|\n| yAccessor | ({ item }) => item | A function that takes each entry of `data` (named \"item\") as well as the index and returns the y-value of that entry |\n| xAccessor | ({ index }) => index | Same as `yAccessor` but returns the x-value of that entry|\n| yScale | d3Scale.scaleLinear | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand )| \n| xScale | d3Scale.scaleLinear | Same as `yScale` but for the x axis |\n| svg | `{}` | an object containing  all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props)|\n| animate | true | PropTypes.bool |\n| animationDuration | 300 | PropTypes.number |\n| style | undefined | Supports all [ViewStyleProps](https://facebook.github.io/react-native/docs/viewstyleproptypes.html) |\n| curve | d3.curveLinear | A function like [this](https://github.com/d3/d3-shape#curves) |\n| contentInset | { top: 0, left: 0, right: 0, bottom: 0 } | An object that specifies how much fake \"margin\" to use inside of the SVG canvas. This is particularly helpful on Android where `overflow: \"visible\"` isn't supported and might cause clipping. Note: important to have same contentInset on axis's and chart |\n| numberOfTicks | 10 | We use [d3-array](https://github.com/d3/d3-array#ticks) to evenly distribute the grid and dataPoints on the yAxis. This prop specifies how many \"ticks\" we should try to render. Note: important that this prop is the same on both the chart and on the yAxis |\n| showGrid | true | Whether or not to show the grid lines |\n| gridMin | undefined | Normally the graph tries to draw from edge to edge within the view bounds. Using this prop will allow the grid to reach further than the actual dataPoints. [Example](#gridmin/max) |\n| gridMax | undefined | The same as \"gridMin\" but will instead increase the grids maximum value |\n| renderGrid | `Grid.Horizontal` | A function that returns the component to be rendered as the grid |\n| extras | undefined | An array of whatever data you want to render. Each item in the array will call `renderExtra`. [See example](#extras) |\n| renderDecorator | `() => {}`| Called once for each entry in `dataPoints` and expects a component. Use this prop to render e.g points (circles) on each data point. [See example](#decorator) |\n| renderGrid | `defaultGrid`| A function that renders the grid, see source for argumments |\n\n## Components\n\nThis library currently provides the following components\n* [Area](#areachart)\n* [StackedAreaChart](#stackedareachart)\n* [Bar](#barchart)\n* [StackedBarChart](#stackedbarchart)\n* [Line](#linechart)\n* [Pie](#piechart)\n* [Progress- Circle / Gauge](#progresschart)\n* [YAxis](#yaxis)\n* [XAxis](#xaxis)\n\nAlso see [other examples](#other-examples)\n* [Gradient](#gradient)\n* [Decorator](#decorator)\n* [Extras](#extras)\n* [GridMin/Max](#gridminmax)\n* [Layered Charts](#layered-charts)\n* [PieChart with labels](#piechart-with-labels)\n* [Custom Grid](#custom-grid)\n* [Partial Chart](#partial-charts)\n\n### AreaChart\n\n![Area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-chart.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { AreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass AreaChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <AreaChart\n                style={ { height: 200 } }\n                data={ data }\n                contentInset={ { top: 30, bottom: 30 } }\n                curve={shape.curveNatural}\n                svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}\n            />\n        )\n    }\n}\n```\n\n#### Props\n\nSee [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| start | 0 | The value of which the area should start (will always end on the data point)  |\n\n### StackedAreaChart\n\nVery similar to an area chart but with multiple sets of data stacked together. Notice that the `dataPoints` prop has changed to `data` and have a different signature.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\nSee [Area stack chart with Y axis](#area-stack-chart-with-yaxis) to see how to use a YAxis with this component\n\n![Stacked area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-stack.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { StackedAreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass StackedAreaExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#8800cc', '#aa00ff', '#cc66ff', '#eeccff' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <StackedAreaChart\n                style={ { height: 200, paddingVertical: 16 } }\n                data={ data }\n                keys={ keys }\n                colors={ colors }\n                curve={ shape.curveNatural }\n                showGrid={ false }\n            />\n        )\n    }\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries  |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n### BarChart\n![Bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-chart.png)\n\n#### Example (single set data)\n```javascript\nimport React from 'react'\nimport { BarChart } from 'react-native-svg-charts'\n\nclass BarChartExample extends React.PureComponent {\n\n    render() {\n\n        const data    = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n        const barData = [\n            {\n                values: data,\n                positive: {\n                    fill: fillColor,\n                    // other react-native-svg supported props\n                },\n                negative: {\n                    fill: fillColorNegative,\n                    // other react-native-svg supported props\n                },\n            },\n        ]\n\n        return (\n            <BarChart\n                style={ { height: 200 } }\n                data={ barData }\n                contentInset={ { top: 30, bottom: 30 } }\n            />\n        )\n    }\n\n}\n\n```\n\n![Grouped bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/grouped-bar-chart.png)\n\n#### Example (multiple set data - grouped)\n```javascript\nimport React from 'react'\nimport { BarChart } from 'react-native-svg'\n\nclass GroupedBarChartExample extends React.PureComponent {\n\n    render() {\n\n        const data1 = [ 14, -1, 100, -95, -94, -24, -8, 85, -91, 35, -53, 53, -78, 66, 96, 33, -26, -32, 73, 8 ]\n        const data2 = [ 24, 28, 93, 77, -42, -62, 52, -87, 21, 53, -78, -62, -72, -6, 89, -70, -94, 10, 86, 84 ]\n\n        const barData = [\n            {\n                values: data1,\n                positive: {\n                    fill: 'rgb(134, 65, 244)',\n                },\n                negative: {\n                    fill: 'rgba(134, 65, 244, 0.2)',\n                },\n            },\n            {\n                values: data2,\n                positive: {\n                    fill: 'rgb(244, 115, 65)',\n                },\n                negative: {\n                    fill: 'rgb(244, 115, 65, 0.2)',\n                },\n            },\n        ]\n\n        return (\n            <BarChart\n                style={ { height: 200 } }\n                data={ barData }\n                contentInset={ { top: 30, bottom: 30 } }\n            />\n        )\n    }\n\n}\n\n```\n\n### Props\nAlso see [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | Slightly different than other charts since we allow for grouping of bars. This array should contain at least one object with the following shape `{values: array, positive: object, negative: object}` where `positive` and `negative` are objects that contain [svg props](https://github.com/react-native-community/react-native-svg#common-props) to be used depending on the value of the bar  |\n| spacing | 0.05 | Spacing between the bars (or groups of bars). Percentage of one bars width. Default = 5% of bar width |\n| contentInset | `{ top: 0, left: 0, right: 0, bottom: 0 }` | PropTypes.shape |\n\n### StackedBarChart\n\nThe same as the [StackedAreaChart](#stackedareachart) except with bars.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\n\n![Stacked bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { StackedBarChart } from 'react-native-svg-charts'\n\nclass StackedBarChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n                oranges: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#7b4173', '#a55194', '#ce6dbd', '#de9ed6' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <StackedBarChart\n                style={ { height: 200 } }\n                keys={ keys }\n                colors={ colors }\n                data={ data }\n                showGrid={ false }\n                contentInset={ { top: 30, bottom: 30 } }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries  |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n### LineChart\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/line-chart.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { LineChart } from 'react-native-svg-charts'\n\nclass LineChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <LineChart\n                style={ { height: 200 } }\n                data={ data }\n                svg={{ stroke: 'rgb(134, 65, 244)' }}\n                contentInset={ { top: 20, bottom: 20 } }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\nSee [Common Props](#common-props)\n\n### PieChart\n![Pie chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/pie-chart.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { PieChart } from 'react-native-svg-charts'\n\nclass PieChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const randomColor = () => ('#' + (Math.random() * 0xFFFFFF << 0).toString(16) + '000000').slice(0, 7)\n\n        const pieData = data\n            .filter(value => value > 0)\n            .map((value, index) => ({\n                value,\n                color: randomColor(),\n                key: `pie-${index}`,\n                onPress: () => console.log(`${index} slice pressed`),\n            }))\n\n        return (\n            <PieChart\n                style={ { height: 200 } }\n                data={ pieData }\n            />\n        )\n    }\n\n}\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | Slightly different than `dataPoints` because we allow for custom coloring of slices and onPress callback. The array should contain objects of the following shape: `{key: 'string|number', color: 'string', value: 'number', onPress?: function}` |\n| outerRadius | \"100%\" | The outer radius, use this to tweak how close your pie is to the edge of it's container. Takes either percentages or absolute numbers (pixels) |\n| innerRadius | \"50%\" | The inner radius, use this to create a donut. Takes either percentages or absolute numbers (pixels) |\n| labelRadius | undefined | The radius of the circle that will help you layout your labels. Takes either percentages or absolute numbers (pixels) |\n| padAngle | |  The angle between the slices |\n| renderDecorator | `() => {}` | PropTypes.func |\n| sort | `(a,b) => b.value - a.value` | Like any normal sort function it expects either 0, a positive or negative return value. The arguments are each an object from the `dataPoints` array |\n\n\n### ProgressCircle\n![Progress circle](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/progress-circle.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { ProgressCircle }  from 'react-native-svg-charts'\n\nclass ProgressCircleExample extends React.PureComponent {\n\n    render() {\n\n        return (\n            <ProgressCircle\n                style={ { height: 200 } }\n                progress={ 0.7 }\n                progressColor={'rgb(134, 65, 244)'}\n            />\n        )\n    }\n\n}\n\n```\n\n\n![Progress gauge](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/progress-gauge.png)\n\n#### Example (Gauge variant)\n```javascript\nimport React from 'react'\nimport { ProgressCircle } from 'react-native-svg-charts'\n\nclass ProgressGaugeExample extends React.PureComponent {\n\n    render() {\n\n        return (\n            <ProgressCircle\n                style={ { height: 200 } }\n                progress={ 0.7 }\n                progressColor={ 'rgb(134, 65, 244)' }\n                startAngle={ -Math.PI * 0.8 }\n                endAngle={ Math.PI * 0.8 }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| progress | **required** | PropTypes.number.isRequired |\n| progressColor | 'black' | PropTypes.any |\n| startAngle | `0` | PropTypes.number |\n| endAngle | `Math.PI * 2` |  PropTypes.number |\n\n### YAxis\n\n![Y-axis](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/y-axis.png)\n\nA helper component to layout your Y-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the YAxis has the same vertical contentInset.\n\n#### Example\n```javascript\nimport React from 'react'\nimport { LineChart, YAxis } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass YAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const contentInset = { top: 20, bottom: 20 }\n\n        return (\n            <View style={ { height: 200, flexDirection: 'row' } }>\n                <YAxis\n                  data={data}\n                  contentInset={ contentInset }\n                  svg={{\n                      fill: 'grey',\n                      fontSize: 10,\n                  }}\n                  formatLabel={ value => `${value}ºC` }\n                />\n                <LineChart\n                    style={ { flex: 1, marginLeft: 16 } }\n                    data={data}\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                    contentInset={ contentInset }\n                />\n            </View>\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n(see [Common Props](#common-props))\n\n| Property | Default | Description |\n| --- | --- | --- |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `yScale` |\n| svg | `{}` | supports all svg props an svg text normally supports |\n| formatLabel | `value => {}` | A utility function to format the text before it is displayed, e.g `value => \"$\" + value |\n| contentInset | { top: 0, bottom: 0 } | Used to sync layout with chart (if same prop used there) |\n| min | undefined | Used to sync layout with chart (if gridMin is used there) |\n| max | undefined | Used to sync layout with chart (if gridMax is used there) |\n\n\n### XAxis\n\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/x-axis.png)\n\nA helper component to layout your X-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the YAxis has the same horizontal contentInset.\n\n#### Example\n```javascript\nimport React from 'react'\nimport { LineChart, XAxis } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass XAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <View style={{ height: 200, padding: 20 }}>\n                <LineChart\n                    style={{ flex: 1 }}\n                    data={data}\n                    gridMin={0}\n                    contentInset={{ top: 10, bottom: 10 }}\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                />\n                <XAxis\n                    style={{ marginHorizontal: -10 }}\n                    data={ data }\n                    formatLabel={ (value, index) => index }\n                    contentInset={{ left: 10, right: 10 }}\n                    svg={{ fontSize: 10 }}\n                />\n            </View>\n        )\n    }\n}\n\n```\n\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| values | **required** | An array of values to render on the xAxis. Should preferably have the same length as the chart's dataPoints. |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `xScale` |\n| spacing | 0.05 | Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacing` prop on the actual BarChart.   |\n| svg | `{}` | supports all svg props an svg text normally supports |\n| formatLabel | `(value, index) => index}` | A utility function to format the text before it is displayed, e.g `value => \"day\" + value |\n| contentInset | { left: 0, right: 0 } | Used to sync layout with chart (if same prop used there) |\n\n\n\n## Other Examples\n\n### Gradient\nGradients are supported by the `AreaChart`, `LineChart` and `BarChart` and is used with the `renderGradient` prop according to the example below.\n`renderGradient` is similar to `renderDecorator` and `renderExtra`. To get more information on exactly what arguments are passed take a look in the source code (shouldn't be too complicated)\nYou can read more about the available gradients [here](https://github.com/react-native-community/react-native-svg#lineargradient)\n\n![Gradient AreaChart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/gradient.png)\n![Gradient LineChart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/gradient-line.png)\n![Gradient BarChart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/gradient-bar.png)\n\n```javascript\nimport React from 'react'\nimport { AreaChart } from 'react-native-svg-charts'\nimport { Defs, LinearGradient, Stop } from 'react-native-svg'\n\nclass GradientExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const Gradient = ({ index }) => (\n            <Defs key={index}>\n                <LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>\n                    <Stop offset={'0%'} stopColor={'rgb(134, 65, 244)'} stopOpacity={0.8}/>\n                    <Stop offset={'100%'} stopColor={'rgb(134, 65, 244)'} stopOpacity={0.2}/>\n                </LinearGradient>\n            </Defs>\n        )\n\n        return (\n            <AreaChart\n                style={{ height: 200 }}\n                data={data}\n                contentInset={{ top: 20, bottom: 20 }}\n                extras={[ Gradient ]}\n                svg={{ fill: 'url(#gradient)' }}\n            />\n        )\n    }\n\n}\n\n```\n\n### Decorator\n\nThe `renderDecorator` prop allow for decorations on each of the provided data points. The `renderDecorator` is very similar to the `renderItem` of a [FlatList](https://facebook.github.io/react-native/docs/flatlist.html)\nand is a function that is called with an object as an arguments to help the layout of the extra decorator. The content of the argument object is as follows:\n\n```javascript\n{\n    value: number, // the value of the data points. Pass to y function to get y coordinate of data point\n    index: number, // the index of the data points. Pass to x function to get x coordinate of data point\n    x: function, // the function used to calculate the x coordinate of a specific data point index\n    y: function, // the function used to calculate the y coordinate of a specific data point value\n}\n```\n\nRemember that all components returned by `renderDecorator` must be one that is renderable by the [`<Svg/>`](https://github.com/react-native-community/react-native-svg#svg) element, i.e all components supported by [react-native-svg](https://github.com/react-native-community/react-native-svg)\n\n![Decorator](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/decorators.png)\n\n```javascript\nimport React from 'react'\nimport { AreaChart } from 'react-native-svg-charts'\nimport { Circle } from 'react-native-svg'\n\nclass DecoratorExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <AreaChart\n                style={ { height: 200 } }\n                data={ data }\n                svg={ { fill: 'rgba(134, 65, 244, 0.2)' } }\n                contentInset={ { top: 20, bottom: 30 } }\n                renderDecorator={ ({ x, y, index, value }) => (\n                    <Circle\n                        key={ index }\n                        cx={ x(index) }\n                        cy={ y(value) }\n                        r={ 4 }\n                        stroke={ 'rgb(134, 65, 244)' }\n                        fill={ 'white' }\n                    />\n                ) }\n            />\n        )\n    }\n\n}\n```\n### Extras\nThe `extras` prop allow for arbitrary decorators on your chart.\nand is a function that is called with an object as an arguments to help the layout of the extra decorator. The content of the argument object is as follows:\n\n```javascript\n{\n    item: any, // the entry of the 'extras' array\n    x: function, // the function used to calculate the x coordinate of a specific data point index\n    y: function, // the function used to calculate the y coordinate of a specific data point value\n    index: number, // the index of the item in the 'extras' array\n    width: number, // the width of the svg canvas,\n    height: number, // the number fo the svg canvas,\n}\n```\nThere might be additional parameters sent to the `extras` functions as well, depending on the chart type.\n\nThe `LineChart` passes the svg path data that rendered the line. (argument name `line`)\n\nThe `AreaChart` passes both the area svg path as well as the \nsvg path for the line following the upper bounds of the area. \n(argument name `area` and `line` respectively)\n\nSee [Partial Chart](#partial-chart) for use case for this.\n\nRemember that all components returned by an `extras` function must be one that is renderable by the [`<Svg/>`](https://github.com/react-native-community/react-native-svg#svg) element, i.e all components supported by [react-native-svg](https://github.com/react-native-community/react-native-svg)\n\n![Extras](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/extras.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { LineChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\nimport { Circle, G, Line, Rect, Text } from 'react-native-svg'\n\nclass ExtrasExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        /**\n         * Both below functions should preferably be their own React Components\n         */\n\n        const HorizontalLine = (({ y }) => (\n            <Line\n                key={ 'zero-axis' }\n                x1={ '0%' }\n                x2={ '100%' }\n                y1={ y(50) }\n                y2={ y(50) }\n                stroke={ 'grey' }\n                strokeDasharray={ [ 4, 8 ] }\n                strokeWidth={ 2 }\n            />\n        ))\n\n        const Tooltip = ({ x, y }) => (\n            <G\n                x={ x(5) - (75 / 2) }\n                key={ 'tooltip' }\n                onPress={ () => console.log('tooltip clicked') }\n            >\n                <G y={ 50 }>\n                    <Rect\n                        height={ 40 }\n                        width={ 75 }\n                        stroke={ 'grey' }\n                        fill={ 'white' }\n                        ry={ 10 }\n                        rx={ 10 }\n                    />\n                    <Text\n                        x={ 75 / 2 }\n                        dy={20}\n                        alignmentBaseline={'middle'}\n                        textAnchor={ 'middle' }\n                        stroke={ 'rgb(134, 65, 244)' }\n                    >\n                        { `${data[5]}ºC` }\n                    </Text>\n                </G>\n                <G x={ 75 / 2 }>\n                    <Line\n                        y1={ 50 + 40 }\n                        y2={ y(data[ 5 ]) }\n                        stroke={ 'grey' }\n                        strokeWidth={ 2 }\n                    />\n                    <Circle\n                        cy={ y(data[ 5 ]) }\n                        r={ 6 }\n                        stroke={ 'rgb(134, 65, 244)' }\n                        strokeWidth={2}\n                        fill={ 'white' }\n                    />\n                </G>\n            </G>\n        )\n\n        return (\n            <LineChart\n                style={ { height: 200 } }\n                data={ data }\n                svg={{\n                    stroke: 'rgb(134, 65, 244)',\n                    strokeWidth: 2,\n                }}\n                contentInset={ { top: 20, bottom: 20 } }\n                curve={ shape.curveLinear }\n                extras={ [ HorizontalLine, Tooltip ] }\n            />\n        )\n    }\n\n}\n```\n\n### gridMin/Max\nCharts normally render edge to edge, if this is not the wanted behaviour it can easily be altered with the `gridMin` and `gridMax` props. Just compare the below example with the example for the regular [AreaChart](#areachart)\n\n![Grid Min Max](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/grid-min-max.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { AreaChart, Path } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass GridMinMaxExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <AreaChart\n                style={{ height: 200 }}\n                data={data}\n                svg={{ fill: 'rgba(134, 65, 244, 0.2)' }}\n                curve={shape.curveNatural}\n                gridMax={500}\n                gridMin={-500}\n                extras={[\n                    ({ line }) => (\n                        <Path\n                            key={'line '}\n                            d={line}\n                            stroke={'rgb(134, 65, 244)'}\n                            fill={'none'}\n                        />\n                    ),\n                ]}\n            />\n        )\n    }\n\n}\n```\n\n### StackedAreaChart with YAxis\nSince the `<StackedAreaChart>` uses a different data structure and can be affected by both the `order` and `offset` prop it's not obvious how to extra the dataPoints for the YAxis.\nThe remedy this the AreaStackChart exposes a static API with a function `extractDataPoints` where you must pass in the same `data`,  `keys` ( as well as  `order` and `offset` if other than default is used) as the props to the component itself\n\n![Area stack chart with YAxis](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-stack-with-y-axis.png)\n\n```javascript\nimport React from 'react'\nimport { StackedAreaChart, YAxis } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\nimport { View } from 'react-native'\n\nclass AreaStackWithAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ 'rgb(138, 0, 230, 0.8)', 'rgb(173, 51, 255, 0.8)', 'rgb(194, 102, 255, 0.8)', 'rgb(214, 153, 255, 0.8)' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <View style={ { flexDirection: 'row', height: 200 } }>\n                <StackedAreaChart\n                    style={ { flex: 1 } }\n                    contentInset={ { top: 10, bottom: 10 } }\n                    data={ data }\n                    keys={ keys }\n                    colors={ colors }\n                    curve={ shape.curveNatural }\n                    { ...this.props }\n                />\n                <YAxis\n                    style={ { position: 'absolute', top: 0, bottom: 0 }}\n                    data={ StackedAreaChart.extractDataPoints(data, keys) }\n                    contentInset={ { top: 10, bottom: 10 } }\n                    svg={ {\n                        fontSize: 8,\n                        fill: 'white',\n                        stroke: 'black',\n                        strokeWidth: 0.1,\n                        alignmentBaseline: 'baseline',\n                        baselineShift: '3',\n                    } }\n                />\n            </View>\n        )\n    }\n}\n\n```\n\n### Layered Charts\nThis library supports layering/composing out of the box with simple styling. As long as the layered charts share the same container and are correctly positioned everything will work as expected.\nIf your data sets don't share the same max/min data make sure to utilize the `gridMin/gridMax` prop to align the charts.\n\n![Stacked Charts](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/stacked-charts.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { AreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\nimport { StyleSheet, View } from 'react-native'\n\nclass LayeredChartsExample extends React.PureComponent {\n\n    render() {\n\n        const data  = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n        const data2 = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ].reverse()\n\n        return (\n            <View style={ { height: 200 } }>\n                <AreaChart\n                    style={ { flex: 1 } }\n                    data={ data }\n                    svg={{ fill: 'rgba(134, 65, 244, 0.5)' }}\n                    contentInset={ { top: 20, bottom: 20 } }\n                    curve={ shape.curveNatural }\n                />\n                <AreaChart\n                    style={ StyleSheet.absoluteFill }\n                    data={ data2 }\n                    svg={{ fill: 'rgba(34, 128, 176, 0.5)' }}\n                    contentInset={ { top: 20, bottom: 20 } }\n                    curve={ shape.curveNatural }\n                />\n            </View>\n        )\n    }\n\n}\n```\n\n### PieChart with labels\nThe PieChart as well as most of the charts support decorators.\nIn the case of the PieChart you get `pieCentroid` and `labelCentroid` instead of the `x` and `y` as arguments in the `renderDecorator` callback.\nThis will allow you to render labels aligned with your pie slices. Experiment with `outerRadius` and `labelRadius` to layout your labels in relation to your chart\n\n![PieChart with labels](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/pie-chart-with-labels.png)\n\n### Example\n```javascript\nimport React from 'react'\nimport { PieChart } from 'react-native-svg-charts'\nimport { Circle, G, Line } from 'react-native-svg'\n\nclass PieChartWithLabelExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91 ]\n\n        const randomColor = () => ('#' + (Math.random() * 0xFFFFFF << 0).toString(16) + '000000').slice(0, 7)\n\n        const pieData = data\n            .filter(value => value > 0)\n            .map((value, index) => ({\n                value,\n                color: randomColor(),\n                key: `pie-${index}`,\n            }))\n\n        return (\n            <PieChart\n                style={ { height: 200 } }\n                data={ pieData }\n                spacing={ 0 }\n                innerRadius={ 20 }\n                outerRadius={ 55 }\n                labelRadius={ 80 }\n                renderDecorator={ ({ item, pieCentroid, labelCentroid, index }) => (\n                    <G key={ index }>\n                        <Line\n                            x1={ labelCentroid[ 0 ] }\n                            y1={ labelCentroid[ 1 ] }\n                            x2={ pieCentroid[ 0 ] }\n                            y2={ pieCentroid[ 1 ] }\n                            stroke={ item.color }\n                        />\n                        <Circle\n                            cx={ labelCentroid[ 0 ] }\n                            cy={ labelCentroid[ 1 ] }\n                            r={ 15 }\n                            fill={ item.color }\n                        />\n                    </G>\n                ) }\n\n            />\n        )\n    }\n\n}\n```\n\n\n### Custom grid\nThe default grid is just a collection of horizontal `Line`s. If you simply want to change the direction or styling look at the `renderGrid` & `gridProps` prop.\nSome projects might require more control of the grid ( direction, different distributions etc), therefore all affected components support the `renderGrid` prop.\nThe `renderGrid` prop takes a function and provides the `x`, `y`, `ticks` and `dataPoints` arguments. Use them as in the example below\n\n![Custom grid](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/custom-grid.png)\n\n### Example\n```javascript\nimport React from 'react'\nimport { LineChart } from 'react-native-svg-charts'\nimport { View } from 'react-native'\nimport { G, Line } from 'react-native-svg'\n\nclass CustomGridExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const CustomGrid = ({ x, y, data, ticks }) => (\n            <G>\n                {\n                    // Horizontal grid\n                    ticks.map(tick => (\n                        <Line\n                            key={ tick }\n                            x1={ '0%' }\n                            x2={ '100%' }\n                            y1={ y(tick) }\n                            y2={ y(tick) }\n                            stroke={ 'rgba(0,0,0,0.2)' }\n                        />\n                    ))\n                }\n                {\n                    // Vertical grid\n                    data.map((_, index) => (\n                        <Line\n                            key={ index }\n                            y1={ '0%' }\n                            y2={ '100%' }\n                            x1={ x(index) }\n                            x2={ x(index) }\n                            stroke={ 'rgba(0,0,0,0.2)' }\n                        />\n                    ))\n                }\n            </G>\n        )\n\n        return (\n            <View style={ { height: 200, flexDirection: 'row' } }>\n                <LineChart\n                    style={ { flex: 1 } }\n                    data={ data }\n                    svg={ {\n                        stroke: 'rgb(134, 65, 244)',\n                    } }\n                    renderGrid={ CustomGrid }\n                />\n            </View>\n        )\n    }\n\n}\n\n```\n\n### Partial Charts\nHere's another example of how the `extras` property can be used to create highly customizable charts. \n\n![Partial Charts](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/partial-charts.png)\n\n### Example (LineChart)\n```javascript\nimport React from 'react'\nimport { ClipPath, Defs, Rect } from 'react-native-svg'\nimport { LineChart, Path } from 'react-native-svg-charts'\n\nclass PartialLineChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const indexToClipFrom = 10\n\n        const Clips = ({ x, width }) => (\n            <Defs key={'clips'}>\n                <ClipPath id=\"clip-path-1\">\n                    <Rect x={'0'} y={'0'} width={x(indexToClipFrom)} height={'100%'}/>\n                </ClipPath>\n                <ClipPath id={'clip-path-2'}>\n                    <Rect x={x(indexToClipFrom)} y={'0'} width={width - x(indexToClipFrom)} height={'100%'}/>\n                </ClipPath>\n            </Defs>\n        )\n\n        // Line extras:\n        const DashedLine = ({ line }) => (\n            <Path\n                key={'line-1'}\n                d={line}\n                stroke={'rgb(134, 65, 244)'}\n                strokeWidth={2}\n                fill={'none'}\n                strokeDasharray={[ 4, 4 ]}\n                clipPath={'url(#clip-path-2)'}\n            />\n        )\n\n        const Shadow = ({ line }) => (\n            <Path\n                y={3}\n                key={'shadow-1'}\n                d={line}\n                stroke={'rgba(134, 65, 244, 0.2)'}\n                strokeWidth={5}\n                fill={'none'}\n            />\n        )\n\n        return (\n            <LineChart\n                style={{ height: 200 }}\n                data={data}\n                contentInset={{ top: 20, bottom: 20 }}\n                svg={{\n                    stroke: 'rgb(134, 65, 244)',\n                    strokeWidth: 2,\n                    clipPath: 'url(#clip-path-1)',\n                }}\n                extras={[\n                    Clips,\n                    Shadow,\n                    DashedLine,\n                ]}\n            />\n        )\n    }\n}\n\n```\n\n### Example (AreaChart)\n```javascript\nimport React from 'react'\nimport { ClipPath, Defs, LinearGradient, Rect, Stop } from 'react-native-svg'\nimport { AreaChart, Path } from 'react-native-svg-charts'\n\nclass PartialAreaChartExample extends React.PureComponent {\n    render() {\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const indexToClipFrom = 10\n\n        const Gradient = () => (\n            <Defs key={'defs'}>\n                <LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>\n                    <Stop offset={'0%'} stopColor={'rgb(134, 65, 244)'} stopOpacity={0.8}/>\n                    <Stop offset={'100%'} stopColor={'rgb(134, 65, 244)'} stopOpacity={0.2}/>\n                </LinearGradient>\n            </Defs>\n        )\n\n        const Clips = ({ x, width }) => (\n            <Defs key={'clips'}>\n                <ClipPath id={'clip-path-1'} key={'0'}>\n                    <Rect x={0} y={'0'} width={x(indexToClipFrom)} height={'100%'}/>\n                </ClipPath>\n                <ClipPath id=\"clip-path-2\" key={'1'}>\n                    <Rect x={x(indexToClipFrom)} y={'0'} width={width - x(indexToClipFrom)} height={'100%'}/>\n                </ClipPath>\n            </Defs>\n        )\n\n        const Line = ({ line }) => (\n            <Path\n                key={'line'}\n                d={line}\n                stroke={'green'}\n                fill={'none'}\n                clipPath={'url(#clip-path-1)'}\n            />\n        )\n\n        const DashedLine = ({ line }) => (\n            <Path\n                key={'dashed-line'}\n                stroke={'green'}\n                d={line}\n                fill={'none'}\n                clipPath={'url(#clip-path-2)'}\n                strokeDasharray={[ 4, 4 ]}\n            />\n        )\n\n        return (\n            <AreaChart\n                style={{ height: 200 }}\n                data={data}\n                contentInset={{ top: 30, bottom: 30 }}\n                svg={{\n                    fill: 'url(#gradient)',\n                    clipPath: 'url(#clip-path-1)',\n                }}\n                extras={[\n                    Gradient,\n                    Clips,\n                    Line,\n                    DashedLine,\n                ]}\n            />\n        )\n    }\n}\n\n```\n\n## License\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"b26c3b05c753473b34cdb1895794f276d4fbcc63","_id":"react-native-svg-charts@3.0.2-test","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-oLmfTQxmVzPR+PL5DUEiPFYP94AUjXr2cUzWHG0f8+3kpdqcqfyShImPZzLeev4FQzZ2dUM0sjIZObqYVoqGnA==","shasum":"9470096090c73c8117bec2c341111aaa985b7ec8","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-3.0.2-test.tgz","fileCount":31,"unpackedSize":194736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZykU7WIoQk/oJIkIB5i+5I6PHpOeAD6IHH72CNTvkYQIhAI24Gox/NmKaUr5o9HtdMnAAXqGtc2UUjgBVcXd6FMfu"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_3.0.2-test_1519565787389_0.402737647892895"},"_hasShrinkwrap":false},"3.0.2":{"name":"react-native-svg-charts","version":"3.0.2","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native-svg":"^6.2.1","react-native":"0.52.2","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"5fe5ea5e05b18b3e9aa1c0fb1463d3b0c9ad1275","_id":"react-native-svg-charts@3.0.2","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-ErgX10jlct4D8yBY02FaJM5Ju9ZyQAtIVjqzhsCN+0x9TCTPaYOlsZL9U7xXMXWTih1zJV4YZm3isrwEp7uv2Q==","shasum":"91e30a23d05797d27c5c7368ba8b15809ca52e9a","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-3.0.2.tgz","fileCount":35,"unpackedSize":204995,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/ygla6BX2Papg0VkVcnlKotmmLlDgWtHtt6HDJRTZfAiEApUk/do9hlTZtjjNIo/ZHofFD6ff63bxNottOXNwSPVg="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_3.0.2_1519572903517_0.8304825170522723"},"_hasShrinkwrap":false},"4.0.0-beta":{"name":"react-native-svg-charts","version":"4.0.0-beta","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native-svg":"^6.2.1","react-native":"0.52.2","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"readme":"# react-native-svg-charts\n\n[![version](https://img.shields.io/npm/v/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n[![downloads](https://img.shields.io/npm/dm/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n![circleci](https://circleci.com/gh/JesperLekland/react-native-svg-charts.svg?style=shield&circle-token=1a809ccdfbd0df3ed425a08f09c558401f794140)\n[![license](https://img.shields.io/npm/l/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n\nIn order to not bloat this README to much we've moved some examples over to \n[`react-native-svg-charts-examples`](https://github.com/JesperLekland/react-native-svg-charts-examples).\nThere we will try to showcase the really cool things you can do with this library. \nThis README will try to keep things as simple as possible so that everybody can get up and running as fast as possible.  \n\n### version 4 now available!\nBarChart and PieChart have joined the latest API!\nA few of breaking changes are introduced in this version but we've taken great care to make sure migrating is easy.\nSee [releases](https://github.com/JesperLekland/react-native-svg-charts/releases) for more information.\n\n\n## Prerequisites\n\nThis library uses [react-native-svg](https://github.com/react-native-community/react-native-svg)\nto render its graphs. Therefore this library needs to be installed **AND** linked into your project to work.\n\nOther than the above dependency this library uses pure javascript and supports both iOS and Android\n\n## Motivation\n\nCreating beautiful graphs in React Native shouldn't be hard or require a ton of knowledge.\nWe use [react-native-svg](https://github.com/react-native-community/react-native-svg) in order to render our SVG's and to provide you with great extensibility.\nWe utilize the very popular [d3](https://d3js.org/) library to create our SVG paths and to calculate the coordinates.\n\nWe built this library to be as extensible as possible while still providing you with the most common charts and data visualization tools out of the box.\nThe Line-, Bar-, Area- and Waterfall -charts can all be extended with \"decorators\" and \"extras\".\nThe `renderDecorator` prop is called on each passed `dataPoint` and allows you to simply add things such as points or other decorators to your charts.\nThe `extras` and `renderExtra` prop is used to further decorate your charts with e.g intersections and projections, see the examples for more info.\n\nFeedback and PR's are more than welcome 🙂\n\n## Running\n\nIf you want to test out the library you can clone this repository and run it.\nWe suggest that you test out the [storybooks](https://github.com/storybooks/storybook) that we've implemented.\nMost of the charts are implemented with [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs) so that you can tweak most properties and see their behavior live.\n\nClone the repo and run the following:\n\n```bash\nyarn\n\n# for iOS\n(cd ios && pod install)\nreact-native run-ios\n\n# for Android\nreact-native run-android\n\nyarn storybook\n\n# and then reload your device\n```\n\n\n\n\n## Common Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of arbitrary data - use prop `xAccessor`/`yAccessor`to tell the chart about the data structure|\n| yAccessor | ({ item }) => item | A function that takes each entry of `data` (named \"item\") as well as the index and returns the y-value of that entry |\n| xAccessor | ({ index }) => index | Same as `yAccessor` but returns the x-value of that entry|\n| yScale | d3Scale.scaleLinear | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand )| \n| xScale | d3Scale.scaleLinear | Same as `yScale` but for the x axis |\n| svg | `{}` | an object containing  all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props)|\n| animate | true | PropTypes.bool |\n| animationDuration | 300 | PropTypes.number |\n| style | undefined | Supports all [ViewStyleProps](https://facebook.github.io/react-native/docs/viewstyleproptypes.html) |\n| curve | d3.curveLinear | A function like [this](https://github.com/d3/d3-shape#curves) |\n| contentInset | { top: 0, left: 0, right: 0, bottom: 0 } | An object that specifies how much fake \"margin\" to use inside of the SVG canvas. This is particularly helpful on Android where `overflow: \"visible\"` isn't supported and might cause clipping. Note: important to have same contentInset on axis's and chart |\n| numberOfTicks | 10 | We use [d3-array](https://github.com/d3/d3-array#ticks) to evenly distribute the grid and dataPoints on the yAxis. This prop specifies how many \"ticks\" we should try to render. Note: important that this prop is the same on both the chart and on the yAxis |\n| showGrid | true | Whether or not to show the grid lines |\n| gridMin | undefined | Normally the graph tries to draw from edge to edge within the view bounds. Using this prop will allow the grid to reach further than the actual dataPoints. [Example](#gridmin/max) |\n| gridMax | undefined | The same as \"gridMin\" but will instead increase the grids maximum value |\n| renderGrid | `Grid.Horizontal` | A function that returns the component to be rendered as the grid |\n| extras | undefined | An array of whatever data you want to render. Each item in the array will call `renderExtra`. [See example](#extras) |\n| renderDecorator | `() => {}`| Called once for each entry in `dataPoints` and expects a component. Use this prop to render e.g points (circles) on each data point. [See example](#decorator) |\n\n## Components\n\nThis library currently provides the following components\n* [Area](#areachart)\n* [StackedAreaChart](#stackedareachart)\n* [Bar](#barchart)\n* [StackedBarChart](#stackedbarchart)\n* [Line](#linechart)\n* [Pie](#piechart)\n* [Progress- Circle / Gauge](#progresschart)\n* [YAxis](#yaxis)\n* [XAxis](#xaxis)\n\nAlso see [other examples](#other-examples)\n* [Gradient](#gradient)\n* [Decorator](#decorator)\n* [Extras](#extras)\n* [GridMin/Max](#gridminmax)\n* [Layered Charts](#layered-charts)\n* [PieChart with labels](#piechart-with-labels)\n* [Custom Grid](#custom-grid)\n* [Partial Chart](#partial-charts)\n\n### AreaChart\n\n![Area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-chart.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { AreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass AreaChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <AreaChart\n                style={ { height: 200 } }\n                data={ data }\n                contentInset={ { top: 30, bottom: 30 } }\n                curve={shape.curveNatural}\n                svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}\n            />\n        )\n    }\n}\n```\n\n#### Props\n\nSee [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| start | 0 | The value of which the area should start (will always end on the data point)  |\n\n### StackedAreaChart\n\nVery similar to an area chart but with multiple sets of data stacked together. Notice that the `dataPoints` prop has changed to `data` and have a different signature.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\nSee [Area stack chart with Y axis](#area-stack-chart-with-yaxis) to see how to use a YAxis with this component\n\n![Stacked area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-stack.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { StackedAreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass StackedAreaExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#8800cc', '#aa00ff', '#cc66ff', '#eeccff' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <StackedAreaChart\n                style={ { height: 200, paddingVertical: 16 } }\n                data={ data }\n                keys={ keys }\n                colors={ colors }\n                curve={ shape.curveNatural }\n                showGrid={ false }\n            />\n        )\n    }\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries  |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n### BarChart\n![Bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-chart.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { BarChart } from 'react-native-svg-charts'\n\nclass BarChartExample extends React.PureComponent {\n\n    render() {\n\n        const fill = 'rgb(134, 65, 244)'\n        const data    = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <BarChart\n                style={ { height: 200 } }\n                data={data}\n                svg={{ fill }}\n                contentInset={ { top: 30, bottom: 30 } }\n                { ...this.props }\n            />\n        )\n    }\n\n}\n```\n\n### Props\nAlso see [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** |  The data prop in a barChart can look exactly like in a Line- or AreaChart, i.e an array of just numbers or complex objects. It can however also be an array with several data sets. See [the examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples)|\n| horizontal | false | Boolean whether or not the bars should be horizontal |\n| spacing | 0.05 | Spacing between the bars (or groups of bars). Percentage of one bars width. Default = 5% of bar width |\n| contentInset | `{ top: 0, left: 0, right: 0, bottom: 0 }` | PropTypes.shape |\n\n### StackedBarChart\n\nThe same as the [StackedAreaChart](#stackedareachart) except with bars.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\n\n![Stacked bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { StackedBarChart } from 'react-native-svg-charts'\n\nclass StackedBarChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n                oranges: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#7b4173', '#a55194', '#ce6dbd', '#de9ed6' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <StackedBarChart\n                style={ { height: 200 } }\n                keys={ keys }\n                colors={ colors }\n                data={ data }\n                showGrid={ false }\n                contentInset={ { top: 30, bottom: 30 } }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries  |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n### LineChart\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/line-chart.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { LineChart } from 'react-native-svg-charts'\n\nclass LineChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <LineChart\n                style={ { height: 200 } }\n                data={ data }\n                svg={{ stroke: 'rgb(134, 65, 244)' }}\n                contentInset={ { top: 20, bottom: 20 } }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\nSee [Common Props](#common-props)\n\n### PieChart\n\nThe PieChart is a really nice component with great support for custom behavior.\nThe PieChart does not support the `extras` prop as it doesn't make much sense in the context of a pie chart.\nIt does however support the decorator prop with some extra arguments to help you layout your labels (and whatnot).\n\nSee more examples in the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n![Pie chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/pie-chart.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { PieChart } from 'react-native-svg-charts'\n\nclass PieChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const randomColor = () => ('#' + (Math.random() * 0xFFFFFF << 0).toString(16) + '000000').slice(0, 7)\n\n        const pieData = data\n            .filter(value => value > 0)\n            .map((value, index) => ({\n                value,\n                svg: {\n                    fill: randomColor(),\n                    onPress: () => console.log('press', index),\n                },\n                key: `pie-${index}`,\n            }))\n\n        return (\n            <PieChart\n                style={ { height: 200 } }\n                data={ pieData }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | Very similar to the data prop of our other charts, the only exception is that the PieChart only accepts complex objects (not just numbers). An item can also contain the `arc` property which allows you two override settings on that specific arc. See [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) |\n| valueAccessor | ({ item }) => item.value | Very similar to the `yAccessor` of the other charts |\n| outerRadius | \"100%\" | The outer radius, use this to tweak how close your pie is to the edge of it's container. Takes either percentages or absolute numbers (pixels) |\n| innerRadius | \"50%\" | The inner radius, use this to create a donut. Takes either percentages or absolute numbers (pixels) |\n| labelRadius | undefined | The radius of the circle that will help you layout your labels. Takes either percentages or absolute numbers (pixels) |\n| padAngle | |  The angle between the slices |\n| sort | `(a,b) => b.value - a.value` | Like any normal sort function it expects either 0, a positive or negative return value. The arguments are each an object from the `dataPoints` array |\n\n\n### ProgressCircle\n![Progress circle](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/progress-circle.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { ProgressCircle }  from 'react-native-svg-charts'\n\nclass ProgressCircleExample extends React.PureComponent {\n\n    render() {\n\n        return (\n            <ProgressCircle\n                style={ { height: 200 } }\n                progress={ 0.7 }\n                progressColor={'rgb(134, 65, 244)'}\n            />\n        )\n    }\n\n}\n\n```\n\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| progress | **required** | PropTypes.number.isRequired |\n| progressColor | 'black' | PropTypes.any |\n| startAngle | `0` | PropTypes.number |\n| endAngle | `Math.PI * 2` |  PropTypes.number |\n\n### YAxis\n\n![Y-axis](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/y-axis.png)\n\nA helper component to layout your Y-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the YAxis has the same vertical contentInset.\n\n#### Example\n```javascript\nimport React from 'react'\nimport { LineChart, YAxis } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass YAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const contentInset = { top: 20, bottom: 20 }\n\n        return (\n            <View style={ { height: 200, flexDirection: 'row' } }>\n                <YAxis\n                  data={data}\n                  contentInset={ contentInset }\n                  svg={{\n                      fill: 'grey',\n                      fontSize: 10,\n                  }}\n                  formatLabel={ value => `${value}ºC` }\n                />\n                <LineChart\n                    style={ { flex: 1, marginLeft: 16 } }\n                    data={data}\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                    contentInset={ contentInset }\n                />\n            </View>\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n(see [Common Props](#common-props))\n\n| Property | Default | Description |\n| --- | --- | --- |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `yScale`, *or* d3Scale.scaleBand if used in conjunction with a horizontal BarChart |\n| svg | `{}` | supports all svg props an svg text normally supports |\n| formatLabel | `value => {}` | A utility function to format the text before it is displayed, e.g `value => \"$\" + value |\n| contentInset | { top: 0, bottom: 0 } | Used to sync layout with chart (if same prop used there) |\n| min | undefined | Used to sync layout with chart (if gridMin is used there) |\n| max | undefined | Used to sync layout with chart (if gridMax is used there) |\n\n\n### XAxis\n\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/x-axis.png)\n\nA helper component to layout your X-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the XAxis has the same horizontal contentInset.\n\nThe XAxis also supports the `xAccessor` prop, if it's not supplied it will assume that you're only interested in the index of the data set.\n\n#### Example\n```javascript\nimport React from 'react'\nimport { LineChart, XAxis } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass XAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <View style={{ height: 200, padding: 20 }}>\n                <LineChart\n                    style={{ flex: 1 }}\n                    data={data}\n                    gridMin={0}\n                    contentInset={{ top: 10, bottom: 10 }}\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                />\n                <XAxis\n                    style={{ marginHorizontal: -10 }}\n                    data={ data }\n                    formatLabel={ value => index }\n                    contentInset={{ left: 10, right: 10 }}\n                    svg={{ fontSize: 10 }}\n                />\n            </View>\n        )\n    }\n}\n\n```\n\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| values | **required** | An array of values to render on the xAxis. Should preferably have the same length as the chart's dataPoints. |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `xScale` |\n| spacing | 0.05 | Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacing` prop on the actual BarChart.   |\n| svg | `{}` | supports all svg props an svg text normally supports |\n| formatLabel | `value => value` | A utility function to format the text before it is displayed, e.g `value => \"day\" + value. Passes back the value provided by the `xAccessor` |\n| contentInset | { left: 0, right: 0 } | Used to sync layout with chart (if same prop used there) |\n\n\n### Decorator\n\nThe `renderDecorator` prop allow for decorations on each of the provided data points. The `renderDecorator` is very similar to the `renderItem` of a [FlatList](https://facebook.github.io/react-native/docs/flatlist.html)\nand is a function that is called with an object as an arguments to help the layout of the extra decorator. The content of the argument object is as follows:\n\n```javascript\n{\n    value: number, // the value of the data points. Pass to y function to get y coordinate of data point\n    index: number, // the index of the data points. Pass to x function to get x coordinate of data point\n    x: function, // the function used to calculate the x coordinate of a specific data point index\n    y: function, // the function used to calculate the y coordinate of a specific data point value\n}\n```\n\nRemember that all components returned by `renderDecorator` must be one that is renderable by the [`<Svg/>`](https://github.com/react-native-community/react-native-svg#svg) element, i.e all components supported by [react-native-svg](https://github.com/react-native-community/react-native-svg)\n\n![Decorator](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/decorators.png)\n\n[Examples](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n### Extras\nThe `extras` prop allow for arbitrary decorators on your chart.\nand is a function that is called with an object as an arguments to help the layout of the extra decorator.\nThis prop is what really makes this library special. With this prop you can customize your charts to your hearts content - gradients, toolTips, clips, images, anything that is supported by `react-native-svg` can be added to your chart through this prop.\nSee the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) for some really cool use cases\n\nThe content of the extras argument object is as follows:\n\n```javascript\n{\n    item: any, // the entry of the 'extras' array\n    x: function, // the function used to calculate the x coordinate of a specific data point index\n    y: function, // the function used to calculate the y coordinate of a specific data point value\n    index: number, // the index of the item in the 'extras' array\n    width: number, // the width of the svg canvas,\n    height: number, // the number fo the svg canvas,\n}\n```\nThere might be additional parameters sent to the `extras` functions as well, depending on the chart type.\n\nThe `LineChart` passes the svg path data that rendered the line. (argument name `line`)\n\nThe `AreaChart` passes both the area svg path as well as the \nsvg path for the line following the upper bounds of the area. \n(argument name `area` and `line` respectively)\n\nTake a look in the source code for additional details.\n\n![Decorator](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/extras.png)\n\n[Examples](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n\n## License\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"f26b28cc37674e4391b0b625bd093b831bea72fe","_id":"react-native-svg-charts@4.0.0-beta","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-DiLS7VQe9y4n5D9mzkQosBsbUs7tlP5zF09ErbRtNJBNtyEurX6jYjrSHUoNj7BsZtmi//Oui46D0nFaGnGx9w==","shasum":"2da98b45a0d3197a854aa4e83c00582765ef3d95","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-4.0.0-beta.tgz","fileCount":41,"unpackedSize":152369,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFoYND1dqdL7qFvZmzlMbFde1lpoM/VCHa4/5GWvlBt5AiA7sS3u+ATlNEslhplKKBSmr3VGAyKixugI5caQ6pNQRg=="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_4.0.0-beta_1520177194131_0.28366322332712457"},"_hasShrinkwrap":false},"4.0.0-beta-2":{"name":"react-native-svg-charts","version":"4.0.0-beta-2","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native-svg":"^6.2.1","react-native":"0.52.2","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"readme":"# react-native-svg-charts\n\n[![version](https://img.shields.io/npm/v/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n[![downloads](https://img.shields.io/npm/dm/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n![circleci](https://circleci.com/gh/JesperLekland/react-native-svg-charts.svg?style=shield&circle-token=1a809ccdfbd0df3ed425a08f09c558401f794140)\n[![license](https://img.shields.io/npm/l/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n\nWelcome to react-native-svg-charts!\n\n### version 4 now available!\nBarChart and PieChart have joined the latest API!\nA few of breaking changes are introduced in this version but we've taken great care to make sure migrating is easy.\nSee [releases](https://github.com/JesperLekland/react-native-svg-charts/releases) for more information.\n\n---\nIn order to not bloat this README to much we've moved some examples over to\n[`react-native-svg-charts-examples`](https://github.com/JesperLekland/react-native-svg-charts-examples).\nThere we will try to showcase the really cool things you can do with this library.\nThis README will try to keep things as simple as possible so that everybody can get up and running as fast as possible.\n\n\n## Prerequisites\n\nThis library uses [react-native-svg](https://github.com/react-native-community/react-native-svg)\nto render its graphs. Therefore this library needs to be installed **AND** linked into your project to work.\n\nOther than the above dependency this library uses pure javascript and supports both iOS and Android\n\n## Motivation\n\nCreating beautiful graphs in React Native shouldn't be hard or require a ton of knowledge.\nWe use [react-native-svg](https://github.com/react-native-community/react-native-svg) in order to render our SVG's and to provide you with great extensibility.\nWe utilize the very popular [d3](https://d3js.org/) library to create our SVG paths and to calculate the coordinates.\n\nWe built this library to be as extensible as possible while still providing you with the most common charts and data visualization tools out of the box.\nThe Line-, Bar-, Area- and Waterfall -charts can all be extended with \"decorators\" and \"extras\".\nThe `renderDecorator` prop is called on each passed `dataPoint` and allows you to simply add things such as points or other decorators to your charts.\nThe `extras` and `renderExtra` prop is used to further decorate your charts with e.g intersections and projections, see the examples for more info.\n\nFeedback and PR's are more than welcome 🙂\n\n## Running\n\nIf you want to test out the library you can clone this repository and run it.\nWe suggest that you test out the [storybooks](https://github.com/storybooks/storybook) that we've implemented.\nMost of the charts are implemented with [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs) so that you can tweak most properties and see their behavior live.\n\nClone the repo and run the following:\n\n```bash\nyarn\n\n# for iOS\n(cd ios && pod install)\nreact-native run-ios\n\n# for Android\nreact-native run-android\n\nyarn storybook\n\n# and then reload your device\n```\n\n\n\n\n## Common Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of arbitrary data - use prop `xAccessor`/`yAccessor`to tell the chart about the data structure|\n| yAccessor | ({ item }) => item | A function that takes each entry of `data` (named \"item\") as well as the index and returns the y-value of that entry |\n| xAccessor | ({ index }) => index | Same as `yAccessor` but returns the x-value of that entry|\n| yScale | d3Scale.scaleLinear | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand )| \n| xScale | d3Scale.scaleLinear | Same as `yScale` but for the x axis |\n| svg | `{}` | an object containing  all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props)|\n| animate | true | PropTypes.bool |\n| animationDuration | 300 | PropTypes.number |\n| style | undefined | Supports all [ViewStyleProps](https://facebook.github.io/react-native/docs/viewstyleproptypes.html) |\n| curve | d3.curveLinear | A function like [this](https://github.com/d3/d3-shape#curves) |\n| contentInset | { top: 0, left: 0, right: 0, bottom: 0 } | An object that specifies how much fake \"margin\" to use inside of the SVG canvas. This is particularly helpful on Android where `overflow: \"visible\"` isn't supported and might cause clipping. Note: important to have same contentInset on axis's and chart |\n| numberOfTicks | 10 | We use [d3-array](https://github.com/d3/d3-array#ticks) to evenly distribute the grid and dataPoints on the yAxis. This prop specifies how many \"ticks\" we should try to render. Note: important that this prop is the same on both the chart and on the yAxis |\n| showGrid | true | Whether or not to show the grid lines |\n| gridMin | undefined | Normally the graph tries to draw from edge to edge within the view bounds. Using this prop will allow the grid to reach further than the actual dataPoints. [Example](#gridmin/max) |\n| gridMax | undefined | The same as \"gridMin\" but will instead increase the grids maximum value |\n| renderGrid | `Grid.Horizontal` | A function that returns the component to be rendered as the grid |\n| extras | undefined | An array of whatever data you want to render. Each item in the array will call `renderExtra`. [See example](#extras) |\n| renderDecorator | `() => {}`| Called once for each entry in `dataPoints` and expects a component. Use this prop to render e.g points (circles) on each data point. [See example](#decorator) |\n\n## Components\n\nThis library currently provides the following components\n* [Area](#areachart)\n* [StackedAreaChart](#stackedareachart)\n* [Bar](#barchart)\n* [StackedBarChart](#stackedbarchart)\n* [Line](#linechart)\n* [Pie](#piechart)\n* [Progress- Circle / Gauge](#progresschart)\n* [YAxis](#yaxis)\n* [XAxis](#xaxis)\n\nAlso see [other examples](#other-examples)\n* [Gradient](#gradient)\n* [Decorator](#decorator)\n* [Extras](#extras)\n* [GridMin/Max](#gridminmax)\n* [Layered Charts](#layered-charts)\n* [PieChart with labels](#piechart-with-labels)\n* [Custom Grid](#custom-grid)\n* [Partial Chart](#partial-charts)\n\n### AreaChart\n\n![Area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-chart.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { AreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass AreaChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <AreaChart\n                style={ { height: 200 } }\n                data={ data }\n                contentInset={ { top: 30, bottom: 30 } }\n                curve={shape.curveNatural}\n                svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}\n            />\n        )\n    }\n}\n```\n\n#### Props\n\nSee [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| start | 0 | The value of which the area should start (will always end on the data point)  |\n\n### StackedAreaChart\n\nVery similar to an area chart but with multiple sets of data stacked together. Notice that the `dataPoints` prop has changed to `data` and have a different signature.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\nSee [Area stack chart with Y axis](#area-stack-chart-with-yaxis) to see how to use a YAxis with this component\n\n![Stacked area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-stack.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { StackedAreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass StackedAreaExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#8800cc', '#aa00ff', '#cc66ff', '#eeccff' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <StackedAreaChart\n                style={ { height: 200, paddingVertical: 16 } }\n                data={ data }\n                keys={ keys }\n                colors={ colors }\n                curve={ shape.curveNatural }\n                showGrid={ false }\n            />\n        )\n    }\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries  |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n### BarChart\n![Bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-chart.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { BarChart } from 'react-native-svg-charts'\n\nclass BarChartExample extends React.PureComponent {\n\n    render() {\n\n        const fill = 'rgb(134, 65, 244)'\n        const data    = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <BarChart\n                style={ { height: 200 } }\n                data={data}\n                svg={{ fill }}\n                contentInset={ { top: 30, bottom: 30 } }\n                { ...this.props }\n            />\n        )\n    }\n\n}\n```\n\n### Props\nAlso see [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** |  The data prop in a barChart can look exactly like in a Line- or AreaChart, i.e an array of just numbers or complex objects. It can however also be an array with several data sets. See [the examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples)|\n| horizontal | false | Boolean whether or not the bars should be horizontal |\n| spacingInner | 0.05 | Spacing between the bars (or groups of bars) |\n| spacingOuter | 0.05 | Spacing outside of the bars (or groups of bars). Percentage of one bars width |\n| contentInset | `{ top: 0, left: 0, right: 0, bottom: 0 }` | PropTypes.shape |\n\n### StackedBarChart\n\nThe same as the [StackedAreaChart](#stackedareachart) except with bars.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\n\n![Stacked bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { StackedBarChart } from 'react-native-svg-charts'\n\nclass StackedBarChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n                oranges: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#7b4173', '#a55194', '#ce6dbd', '#de9ed6' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <StackedBarChart\n                style={ { height: 200 } }\n                keys={ keys }\n                colors={ colors }\n                data={ data }\n                showGrid={ false }\n                contentInset={ { top: 30, bottom: 30 } }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries  |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n### LineChart\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/line-chart.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { LineChart } from 'react-native-svg-charts'\n\nclass LineChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <LineChart\n                style={ { height: 200 } }\n                data={ data }\n                svg={{ stroke: 'rgb(134, 65, 244)' }}\n                contentInset={ { top: 20, bottom: 20 } }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\nSee [Common Props](#common-props)\n\n### PieChart\n\nThe PieChart is a really nice component with great support for custom behavior.\nThe PieChart does not support the `extras` prop as it doesn't make much sense in the context of a pie chart.\nIt does however support the decorator prop with some extra arguments to help you layout your labels (and whatnot).\n\nSee more examples in the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n![Pie chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/pie-chart.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { PieChart } from 'react-native-svg-charts'\n\nclass PieChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const randomColor = () => ('#' + (Math.random() * 0xFFFFFF << 0).toString(16) + '000000').slice(0, 7)\n\n        const pieData = data\n            .filter(value => value > 0)\n            .map((value, index) => ({\n                value,\n                svg: {\n                    fill: randomColor(),\n                    onPress: () => console.log('press', index),\n                },\n                key: `pie-${index}`,\n            }))\n\n        return (\n            <PieChart\n                style={ { height: 200 } }\n                data={ pieData }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | Very similar to the data prop of our other charts, the only exception is that the PieChart only accepts complex objects (not just numbers). An item can also contain the `arc` property which allows you two override settings on that specific arc. See [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) |\n| valueAccessor | ({ item }) => item.value | Very similar to the `yAccessor` of the other charts |\n| outerRadius | \"100%\" | The outer radius, use this to tweak how close your pie is to the edge of it's container. Takes either percentages or absolute numbers (pixels) |\n| innerRadius | \"50%\" | The inner radius, use this to create a donut. Takes either percentages or absolute numbers (pixels) |\n| labelRadius | undefined | The radius of the circle that will help you layout your labels. Takes either percentages or absolute numbers (pixels) |\n| padAngle | |  The angle between the slices |\n| sort | `(a,b) => b.value - a.value` | Like any normal sort function it expects either 0, a positive or negative return value. The arguments are each an object from the `dataPoints` array |\n\n\n### ProgressCircle\n![Progress circle](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/progress-circle.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { ProgressCircle }  from 'react-native-svg-charts'\n\nclass ProgressCircleExample extends React.PureComponent {\n\n    render() {\n\n        return (\n            <ProgressCircle\n                style={ { height: 200 } }\n                progress={ 0.7 }\n                progressColor={'rgb(134, 65, 244)'}\n            />\n        )\n    }\n\n}\n\n```\n\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| progress | **required** | PropTypes.number.isRequired |\n| progressColor | 'black' | PropTypes.any |\n| startAngle | `0` | PropTypes.number |\n| endAngle | `Math.PI * 2` |  PropTypes.number |\n\n### YAxis\n\n![Y-axis](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/y-axis.png)\n\nA helper component to layout your Y-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the YAxis has the same vertical contentInset.\n\n#### Example\n```javascript\nimport React from 'react'\nimport { LineChart, YAxis } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass YAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const contentInset = { top: 20, bottom: 20 }\n\n        return (\n            <View style={ { height: 200, flexDirection: 'row' } }>\n                <YAxis\n                  data={data}\n                  contentInset={ contentInset }\n                  svg={{\n                      fill: 'grey',\n                      fontSize: 10,\n                  }}\n                  formatLabel={ value => `${value}ºC` }\n                />\n                <LineChart\n                    style={ { flex: 1, marginLeft: 16 } }\n                    data={data}\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                    contentInset={ contentInset }\n                />\n            </View>\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n(see [Common Props](#common-props))\n\n| Property | Default | Description |\n| --- | --- | --- |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `yScale`, *or* d3Scale.scaleBand if used in conjunction with a horizontal BarChart |\n| svg | `{}` | supports all svg props an svg text normally supports |\n| formatLabel | `value => {}` | A utility function to format the text before it is displayed, e.g `value => \"$\" + value |\n| contentInset | { top: 0, bottom: 0 } | Used to sync layout with chart (if same prop used there) |\n| min | undefined | Used to sync layout with chart (if gridMin is used there) |\n| max | undefined | Used to sync layout with chart (if gridMax is used there) |\n\n\n### XAxis\n\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/x-axis.png)\n\nA helper component to layout your X-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the XAxis has the same horizontal contentInset.\n\nThe XAxis also supports the `xAccessor` prop, if it's not supplied it will assume that you're only interested in the index of the data set.\n\n#### Example\n```javascript\nimport React from 'react'\nimport { LineChart, XAxis } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass XAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <View style={{ height: 200, padding: 20 }}>\n                <LineChart\n                    style={{ flex: 1 }}\n                    data={data}\n                    gridMin={0}\n                    contentInset={{ top: 10, bottom: 10 }}\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                />\n                <XAxis\n                    style={{ marginHorizontal: -10 }}\n                    data={ data }\n                    formatLabel={ value => index }\n                    contentInset={{ left: 10, right: 10 }}\n                    svg={{ fontSize: 10 }}\n                />\n            </View>\n        )\n    }\n}\n\n```\n\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| values | **required** | An array of values to render on the xAxis. Should preferably have the same length as the chart's dataPoints. |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `xScale` |\n| spacing | 0.05 | Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacing` prop on the actual BarChart.   |\n| svg | `{}` | supports all svg props an svg text normally supports |\n| formatLabel | `value => value` | A utility function to format the text before it is displayed, e.g `value => \"day\" + value. Passes back the value provided by the `xAccessor` |\n| contentInset | { left: 0, right: 0 } | Used to sync layout with chart (if same prop used there) |\n\n\n### Decorator\n\nThe `renderDecorator` prop allow for decorations on each of the provided data points. The `renderDecorator` is very similar to the `renderItem` of a [FlatList](https://facebook.github.io/react-native/docs/flatlist.html)\nand is a function that is called with an object as an arguments to help the layout of the extra decorator. The content of the argument object is as follows:\n\n```javascript\n{\n    value: number, // the value of the data points. Pass to y function to get y coordinate of data point\n    index: number, // the index of the data points. Pass to x function to get x coordinate of data point\n    x: function, // the function used to calculate the x coordinate of a specific data point index\n    y: function, // the function used to calculate the y coordinate of a specific data point value\n}\n```\n\nRemember that all components returned by `renderDecorator` must be one that is renderable by the [`<Svg/>`](https://github.com/react-native-community/react-native-svg#svg) element, i.e all components supported by [react-native-svg](https://github.com/react-native-community/react-native-svg)\n\n![Decorator](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/decorators.png)\n\n[Examples](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n### Extras\nThe `extras` prop allow for arbitrary decorators on your chart.\nand is a function that is called with an object as an arguments to help the layout of the extra decorator.\nThis prop is what really makes this library special. With this prop you can customize your charts to your hearts content - gradients, toolTips, clips, images, anything that is supported by `react-native-svg` can be added to your chart through this prop.\nSee the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) for some really cool use cases\n\nThe content of the extras argument object is as follows:\n\n```javascript\n{\n    item: any, // the entry of the 'extras' array\n    x: function, // the function used to calculate the x coordinate of a specific data point index\n    y: function, // the function used to calculate the y coordinate of a specific data point value\n    index: number, // the index of the item in the 'extras' array\n    width: number, // the width of the svg canvas,\n    height: number, // the number fo the svg canvas,\n}\n```\nThere might be additional parameters sent to the `extras` functions as well, depending on the chart type.\n\nThe `LineChart` passes the svg path data that rendered the line. (argument name `line`)\n\nThe `AreaChart` passes both the area svg path as well as the \nsvg path for the line following the upper bounds of the area. \n(argument name `area` and `line` respectively)\n\nTake a look in the source code for additional details.\n\n![Decorator](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/extras.png)\n\n[Examples](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n\n## License\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"eff071b530feca4187f466b7a8f0c5b7a7ba0519","_id":"react-native-svg-charts@4.0.0-beta-2","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-uRp9Ck2I3InY+omTRsd90Qw796mOX3jPT+a18+EX5dBS9AGNCT1uSVl+jtv+DsuJyDin9mcXFEOQ0uMPI48m/A==","shasum":"b73cb7daf6a37a744d6ea995763443e92e6c0f93","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-4.0.0-beta-2.tgz","fileCount":40,"unpackedSize":145549,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDi+/rT/F+5ETpyT6g1LdnmIDM5BbBNH+qVlZGIkmvs6AiANRVRliQrWEEReAmMwIwq+gyLc3YMFHijeXm59VnlWqw=="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_4.0.0-beta-2_1520183886152_0.7846084925092365"},"_hasShrinkwrap":false},"4.0.0":{"name":"react-native-svg-charts","version":"4.0.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native-svg":"^6.2.1","react-native":"0.52.2","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"31c327ebd21d53bcf160399887fb9407e1654895","_id":"react-native-svg-charts@4.0.0","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-LxgctOkoFMjVO71Jcc9cdY7s7weBywg7oRiPEEqH2xidN+6kPT/59HSP264rvpbljFNBO71bo7HYR6UUHXnTzg==","shasum":"65082f43c0a0306d727eca9128aa0a7ed139593d","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-4.0.0.tgz","fileCount":40,"unpackedSize":146608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH5O26blWgC3Jz07mECVfm9miZH4ejZWBD9ZPQ0v9dAmAiEAil6tFtkDBM9Vt3DY82XXnQOBfVwMCJjIZDzYiqU0ZKs="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_4.0.0_1520185897730_0.9281456339338114"},"_hasShrinkwrap":false},"4.0.1":{"name":"react-native-svg-charts","version":"4.0.1","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native-svg":"^6.2.1","react-native":"0.52.2","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"351d66d153a0ed04ad42e8c3089fdf93e331eae9","_id":"react-native-svg-charts@4.0.1","_npmVersion":"5.5.1","_nodeVersion":"9.3.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-WMd9OTY1JJ8mAWDhnz9gDizUXYO9hzg6V9zStitRFXfAn40rBgPaWERhvw2oox3ok0FOYgqWkVLtBzelBFn4hQ==","shasum":"237c519e495606994a78f9fe7332b2d714d39976","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-4.0.1.tgz","fileCount":40,"unpackedSize":154560,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICw3v577cCqXoL92NibIo/QL56q8ICdH4wyl3moSttGhAiEA+h1/jTXMRPG1R7D2bMMPOso9B1QrPV9uEa08QxSTaGM="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_4.0.1_1520502763123_0.4736142530708609"},"_hasShrinkwrap":false},"4.1.0":{"name":"react-native-svg-charts","version":"4.1.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.1.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native-svg":"^6.2.1","react-native":"0.52.2","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"ac6cdf14d589052caf1b64cae13193db46307bbd","_id":"react-native-svg-charts@4.1.0","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-KGpFq9u14RKJS/jiXDCA+/cYm5Gg6L1faV6NfrxruRaxesNFB2jHE4g/iUTJyQORJbKMNrKaWM3uQaJhKYqZdQ==","shasum":"9dce138a323c2fba81a2450c7ce7e0eec0831b59","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-4.1.0.tgz","fileCount":41,"unpackedSize":148121,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAESmLFCaJwar1dLy7PLKAsSgb4ABZe2cJUEF8t8SpRtAiEA7k6fWaG99BcXhpBin4RhnEl3xHcuTIayUlufFF0V79A="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_4.1.0_1520788421984_0.5655547990393006"},"_hasShrinkwrap":false},"4.2.0":{"name":"react-native-svg-charts","version":"4.2.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^4.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.7.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native":"0.52.2","react-native-svg":"^6.2.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"2447b9ff5a0ccf66450c193cdf351175e4ef207d","_id":"react-native-svg-charts@4.2.0","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-jgEDMVlVPLRwlDnx2bLZo0X78RRWCkbZfak2xPBL+Koyze/AnFBNTTM6Ova5t4XLa2wz1rJitEfue/xy5QG8fQ==","shasum":"6d1bd34b3c767b7ce2450a55a99cc3e66c9a48a3","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-4.2.0.tgz","fileCount":41,"unpackedSize":152895,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDpTmenkwbvpbQ87O/Ml0kSlF5kw6bm8XwSPLPVntXaQIgYy2zbv0/vlAC8rMr57AaEeCdBFXFRONU66guRNjcpts="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_4.2.0_1521397937621_0.4280857593543106"},"_hasShrinkwrap":false},"5.0.0-RC":{"name":"react-native-svg-charts","version":"5.0.0-RC","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^4.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.7.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native":"0.52.2","react-native-svg":"^6.2.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"readme":"# react-native-svg-charts\n\n[![version](https://img.shields.io/npm/v/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n[![downloads](https://img.shields.io/npm/dm/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n![circleci](https://circleci.com/gh/JesperLekland/react-native-svg-charts.svg?style=shield&circle-token=1a809ccdfbd0df3ed425a08f09c558401f794140)\n[![license](https://img.shields.io/npm/l/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n\nWelcome to react-native-svg-charts!\n\n### version 5 is now available!\nA much improved decorator system has been introduced, allowing for greater flexibility and less complexity.\nSee [releases](https://github.com/JesperLekland/react-native-svg-charts/releases) for more information.\n\n---\nIn order to not bloat this README to much we've moved some examples over to\n[`react-native-svg-charts-examples`](https://github.com/JesperLekland/react-native-svg-charts-examples).\nThere we will try to showcase the really cool things you can do with this library.\nThis README will try to keep things as simple as possible so that everybody can get up and running as fast as possible.\n\n\n## Prerequisites\n\nThis library uses [react-native-svg](https://github.com/react-native-community/react-native-svg)\nto render its graphs. Therefore this library needs to be installed **AND** linked into your project to work.\n\nOther than the above dependency this library uses pure javascript and supports both iOS and Android\n\n## Motivation\n\nCreating beautiful graphs in React Native shouldn't be hard or require a ton of knowledge.\nWe use [react-native-svg](https://github.com/react-native-community/react-native-svg) in order to render our SVG's and to provide you with great extensibility.\nWe utilize the very popular [d3](https://d3js.org/) library to create our SVG paths and to calculate the coordinates.\n\nWe built this library to be as extensible as possible while still providing you with the most common charts and data visualization tools out of the box.\nWe're very proud of our \"decorator\" support. All charts can be extended with \"decorators\", a component that somehow styles or enhances your chart.\nSimply pass in a `react-native-svg` compliant component as a child to the graph and it will be called with all the necessary information to layout your decorator.\nSee each chart for information on what data the decorator will be called with.\n\n\nFeedback and PR's are more than welcome 🙂\n\n## Running\n\nIf you want to test out the library you can clone this repository and run it.\nWe suggest that you test out the [storybooks](https://github.com/storybooks/storybook) that we've implemented.\nMost of the charts are implemented with [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs) so that you can tweak most properties and see their behavior live.\n\nClone the repo and run the following:\n\n```bash\nyarn\n\n# for iOS\n(cd ios && pod install)\nreact-native run-ios\n\n# for Android\nreact-native run-android\n\nyarn storybook\n\n# and then reload your device\n```\n\n\n\n\n## Common Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of arbitrary data - use prop `xAccessor`/`yAccessor`to tell the chart about the data structure|\n| yAccessor | ({ item }) => item | A function that takes each entry of `data` (named \"item\") as well as the index and returns the y-value of that entry |\n| xAccessor | ({ index }) => index | Same as `yAccessor` but returns the x-value of that entry|\n| yScale | d3Scale.scaleLinear | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand )|\n| xScale | d3Scale.scaleLinear | Same as `yScale` but for the x axis |\n| svg | `{}` | an object containing  all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props)|\n| animate | false | PropTypes.bool |\n| animationDuration | 300 | PropTypes.number |\n| style | undefined | Supports all [ViewStyleProps](https://facebook.github.io/react-native/docs/viewstyleproptypes.html) |\n| curve | d3.curveLinear | A function like [this](https://github.com/d3/d3-shape#curves) |\n| contentInset | { top: 0, left: 0, right: 0, bottom: 0 } | An object that specifies how much fake \"margin\" to use inside of the SVG canvas. This is particularly helpful on Android where `overflow: \"visible\"` isn't supported and might cause clipping. Note: important to have same contentInset on axis's and chart |\n| numberOfTicks | 10 | We use [d3-array](https://github.com/d3/d3-array#ticks) to evenly distribute the grid and dataPoints on the yAxis. This prop specifies how many \"ticks\" we should try to render. Note: important that this prop is the same on both the chart and on the yAxis |\n| showGrid | true | Whether or not to show the grid lines |\n| gridMin | undefined | Normally the graph tries to draw from edge to edge within the view bounds. Using this prop will allow the grid to reach further than the actual dataPoints. [Example](#gridmin/max) |\n| gridMax | undefined | The same as \"gridMin\" but will instead increase the grids maximum value |\n| children | undefined | One or many `react-native-svg` components that will be used to enhance your chart|\n\n## Common arguments to children\n\n| Property | Description |\n| --- | --- |\n| x | a function that normally accepts the index of a data point an returns its 'x' location on the canvas |\n| y | a function that normally accepts the value of a data point an returns its 'y' location on the canvas |\n| width | the width of the canvas in pixels |\n| height | the height of the canvas in pixels |\n| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point |\n| ticks | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids) |\n\n\n## Components\n\nThis library currently provides the following components\n* [Area](#areachart)\n* [StackedAreaChart](#stackedareachart)\n* [Bar](#barchart)\n* [StackedBarChart](#stackedbarchart)\n* [Line](#linechart)\n* [Pie](#piechart)\n* [ProgressCircle](#progresscircle)\n* [YAxis](#yaxis)\n* [XAxis](#xaxis)\n\nAlso see\n* [Children](#children)\n* [Grid](#grid)\n\n\n### AreaChart\n\n![Area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-chart.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { AreaChart, Grid } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass AreaChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <AreaChart\n                style={{ height: 200 }}\n                data={ data }\n                contentInset={{ top: 30, bottom: 30 }}\n                curve={ shape.curveNatural }\n                svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}\n            >\n                <Grid/>\n            </AreaChart>\n        )\n    }\n}\n```\n\n#### Props\n\nSee [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| start | 0 | The value of which the area should start (will always end on the data point)  |\n\n#### Arguments to children\n\nSupports all [Common arguments to children](#common-arguments-to-children)\n\n### StackedAreaChart\n\nVery similar to an area chart but with multiple sets of data stacked together. Notice that the `dataPoints` prop has changed to `data` and have a different signature.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\nSee [Area stack chart with Y axis](https://github.com/JesperLekland/react-native-svg-charts-examples/blob/master/storybook/stories/area-stack/with-y-axis.js) to see how to use a YAxis with this component\n\n![Stacked area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-stack.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { StackedAreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass StackedAreaExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#8800cc', '#aa00ff', '#cc66ff', '#eeccff' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <StackedAreaChart\n                style={ { height: 200, paddingVertical: 16 } }\n                data={ data }\n                keys={ keys }\n                colors={ colors }\n                curve={ shape.curveNatural }\n                showGrid={ false }\n            />\n        )\n    }\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries  |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n#### Arguments to children\n\n| Property | Description\n| --- | --- |\n| x | a function that normally accepts the index of a data points an returns its 'x' location on the canvas |\n| y | a function that normally accepts the value of a data points an returns its 'y' location on the canvas |\n| width | the width of the canvas in pixels |\n| height | the height of the canvas in pixels |\n| ~~data~~ | ~~the same data array provided to the chart, use this to map over your data points if you want decorators on each point~ |\n| ticks | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids) |\n\nThis chart does not call a child with the `data` argument. This is due to the fact that a lot of calculations go into\ncreating the stacked chart, meaning that the original `data` prop doesn't provide especially valuable information\nwhen trying to layout decorators. It does however call with the rest of the [common arguments](#common-arguments-to-children)\n\n### BarChart\n![Bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-chart.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { BarChart, Grid } from 'react-native-svg-charts'\n\nclass BarChartExample extends React.PureComponent {\n\n    render() {\n\n        const fill = 'rgb(134, 65, 244)'\n        const data   = [ 50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <BarChart\n                style={{ height: 200 }}\n                data={ data }\n                svg={{ fill }}\n                contentInset={{ top: 30, bottom: 30 }}\n            >\n                <Grid/>\n            </BarChart>\n        )\n    }\n\n}\n```\n\n### Props\nAlso see [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** |  The data prop in a barChart can look exactly like in a Line- or AreaChart, i.e an array of just numbers or complex objects. It can however also be an array with several data sets. A data object can contain a `svg` property which allows you two override styles on that specific object. See [the examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples)|\n| horizontal | false | Boolean whether or not the bars should be horizontal |\n| svg | `{}` | Default svg props **for all bars**. Supports all svg props an svg path normally supports. This styles will be overriden if there are specific styles for a given data object  |\n| spacingInner | 0.05 | Spacing between the bars (or groups of bars) |\n| spacingOuter | 0.05 | Spacing outside of the bars (or groups of bars). Percentage of one bars width |\n| contentInset | `{ top: 0, left: 0, right: 0, bottom: 0 }` | PropTypes.shape |\n\n#### Arguments to children\n\n| Property | Description\n| --- | --- |\n| bandwidth |  the width of a band (a.k.a bar) |\n\nAlso supports all [Common arguments to children](#common-arguments-to-children)\n\n### StackedBarChart\n\nThe same as the [StackedAreaChart](#stackedareachart) except with bars.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\n\n![Stacked bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack.png)\n![Stacked bar chart - horizontal](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack-horizontal.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { StackedBarChart } from 'react-native-svg-charts'\n\nclass StackedBarChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n                oranges: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#7b4173', '#a55194', '#ce6dbd', '#de9ed6' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <StackedBarChart\n                style={ { height: 200 } }\n                keys={ keys }\n                colors={ colors }\n                data={ data }\n                showGrid={ false }\n                contentInset={ { top: 30, bottom: 30 } }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries  |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| horizontal | false | Boolean whether or not the bars should be horizontal |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n#### Arguments to children\n\n| Property | Description |\n| --- | --- |\n| x | a function that normally accepts the index of a data points an returns its 'x' location on the canvas |\n| y | a function that normally accepts the value of a data points an returns its 'y' location on the canvas |\n| width | the width of the canvas in pixels |\n| height | the height of the canvas in pixels |\n| ~~data~~ | ~~the same data array provided to the chart, use this to map over your data points if you want decorators on each point~~ |\n| ticks | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids) |\n\nThis chart does not call a child with the `data` argument. This is due to the fact that a lot of calculations go into\ncreating the stacked chart, meaning that the original `data` prop doesn't provide especially valuable information\nwhen trying to layout decorators. It does however call with the rest of the [common arguments](#common-arguments-to-children)\n\n### LineChart\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/line-chart.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { LineChart, Grid } from 'react-native-svg-charts'\n\nclass LineChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <LineChart\n                style={{ height: 200 }}\n                data={ data }\n                svg={{ stroke: 'rgb(134, 65, 244)' }}\n                contentInset={{ top: 20, bottom: 20 }}\n            >\n                <Grid/>\n            </LineChart>\n        )\n    }\n\n}\n\n```\n\n#### Props\nSee [Common Props](#common-props)\n\n#### Arguments to children\n\nSupports all [Common arguments to children](#common-arguments-to-children)\n\n### PieChart\n\nThe PieChart is a really nice component with great support for custom behavior.\nSee more examples in the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n![Pie chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/pie-chart.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { PieChart } from 'react-native-svg-charts'\n\nclass PieChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const randomColor = () => ('#' + (Math.random() * 0xFFFFFF << 0).toString(16) + '000000').slice(0, 7)\n\n        const pieData = data\n            .filter(value => value > 0)\n            .map((value, index) => ({\n                value,\n                svg: {\n                    fill: randomColor(),\n                    onPress: () => console.log('press', index),\n                },\n                key: `pie-${index}`,\n            }))\n\n        return (\n            <PieChart\n                style={ { height: 200 } }\n                data={ pieData }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | Very similar to the data prop of our other charts, the only exception is that the PieChart only accepts complex objects (not just numbers). An item can also contain the `arc` property which allows you two override settings on that specific arc. See [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) |\n| valueAccessor | ({ item }) => item.value | Very similar to the `yAccessor` of the other charts |\n| outerRadius | \"100%\" | The outer radius, use this to tweak how close your pie is to the edge of it's container. Takes either percentages or absolute numbers (pixels) |\n| innerRadius | \"50%\" | The inner radius, use this to create a donut. Takes either percentages or absolute numbers (pixels) |\n| labelRadius | undefined | The radius of the circle that will help you layout your labels. Takes either percentages or absolute numbers (pixels) |\n| padAngle | |  The angle between the slices |\n| sort | `(a,b) => b.value - a.value` | Like any normal sort function it expects either 0, a positive or negative return value. The arguments are each an object from the `dataPoints` array |\n\n#### Arguments to children\n\n| Property | Description\n| --- | --- |\n| width | the width of the canvas in pixels\n| height | the height of the canvas in pixels\n| slices | an array of the pie chart slices. See source code and examples for what it includes\n| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point\n\n\n### ProgressCircle\n![Progress circle](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/progress-circle.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { ProgressCircle }  from 'react-native-svg-charts'\n\nclass ProgressCircleExample extends React.PureComponent {\n\n    render() {\n\n        return (\n            <ProgressCircle\n                style={ { height: 200 } }\n                progress={ 0.7 }\n                progressColor={'rgb(134, 65, 244)'}\n            />\n        )\n    }\n\n}\n\n```\n\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| progress | **required** | PropTypes.number.isRequired |\n| progressColor | 'black' | PropTypes.any |\n| backgroundColor | '#ECECEC' |  PropTypes.any |\n| startAngle | `0` | PropTypes.number |\n| endAngle | `Math.PI * 2` |  PropTypes.number |\n| strokeWidth | 5 |  PropTypes.number |\n\n#### Arguments to children\n\n| Property | Description\n| --- | --- |\n| width | the width of the canvas in pixels |\n| height | the height of the canvas in pixels |\n| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point |\n\n\n### YAxis\n\n![Y-axis](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/y-axis.png)\n\nA helper component to layout your Y-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the YAxis has the same vertical contentInset.\n\n#### Example\n```javascript\nimport React from 'react'\nimport { LineChart, YAxis, Grid } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass YAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const contentInset = { top: 20, bottom: 20 }\n\n        return (\n            <View style={{ height: 200, flexDirection: 'row' }}>\n                <YAxis\n                    data={ data }\n                    contentInset={ contentInset }\n                    svg={{\n                        fill: 'grey',\n                        fontSize: 10,\n                    }}\n                    numberOfTicks={ 10 }\n                    formatLabel={ value => `${value}ºC` }\n                />\n                <LineChart\n                    style={{ flex: 1, marginLeft: 16 }}\n                    data={ data }\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                    contentInset={ contentInset }\n                >\n                    <Grid/>\n                </LineChart>\n            </View>\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n(see [Common Props](#common-props))\n\n| Property | Default | Description |\n| --- | --- | --- |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `yScale`, *or* d3Scale.scaleBand if used in conjunction with a horizontal BarChart |\n| svg | `{}` | supports all svg props an svg text normally supports |\n| spacingInner | 0.05 | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingInner` prop on the actual BarChart |\n| spacingOuter | 0.05 | Spacing outside of the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingOuter` prop on the actual BarChart  |\n| formatLabel | `value => {}` | A utility function to format the text before it is displayed, e.g `value => \"$\" + value |\n| contentInset | { top: 0, bottom: 0 } | Used to sync layout with chart (if same prop used there) |\n| min | undefined | Used to sync layout with chart (if gridMin is used there) |\n| max | undefined | Used to sync layout with chart (if gridMax is used there) |\n\n#### Arguments to children\n\nNo arguments\n\n\n### XAxis\n\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/x-axis.png)\n\nA helper component to layout your X-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the XAxis has the same horizontal contentInset.\n\nThe XAxis also supports the `xAccessor` prop, if it's not supplied it will assume that you're only interested in the index of the data set.\n\n#### Example\n```javascript\nimport React from 'react'\nimport { LineChart, XAxis, Grid } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass XAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <View style={{ height: 200, padding: 20 }}>\n                <LineChart\n                    style={{ flex: 1 }}\n                    data={ data }\n                    gridMin={ 0 }\n                    contentInset={{ top: 10, bottom: 10 }}\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                >\n                    <Grid/>\n                </LineChart>\n                <XAxis\n                    style={{ marginHorizontal: -10 }}\n                    data={ data }\n                    formatLabel={ (value, index) => index }\n                    contentInset={{ left: 10, right: 10 }}\n                    svg={{ fontSize: 10, fill: 'black' }}\n                />\n            </View>\n        )\n    }\n}\n\n```\n\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of values or objects to render on the xAxis. Should preferably have the same length as the chart's dataPoints. If a complex object is used instead of a simple value, a `xAccessor`  prop **is required** to calculate the axis' extent. A data object can contain a `svg` property which allows you to override styles on that specific object  |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `xScale` |\n| spacingInner | 0.05 | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingInner` prop on the actual BarChart |\n| spacingOuter | 0.05 | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingOuter` prop on the actual BarChart |\n| svg | `{}` | Default svg props **for all labels**. Supports all svg props an svg text normally supports. This styles will be overriden if there are specific styles for a given data object  |\n| formatLabel | `value => value` | A utility function to format the text before it is displayed, e.g `value => \"day\" + value`. Passes back the value provided by the `xAccessor` |\n| contentInset | { left: 0, right: 0 } | Used to sync layout with chart (if same prop used there) |\n\n#### Arguments to children\n\nNo arguments\n\n### Children\n\nNew for version 5.0.\nEach chart (and axes) component now accepts React children. *Important*  note is that all children must be a `react-native-svg` component\non order for it to be rendered by the chart. This API deprecates the old one with `extras` and `decorators`.\nEverything that should be rendered above or below the chart should now be supplied as a child to said chart.\nThis allows you to declare the order in which your decorators should be rendered. If you want anything rendered below the chart,\nsimply add the prop `belowChart={true}`. There's a ton of examples in the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples), go and have a look.\n\n\n### Grid\n\nThis library provides a helper component for drawing grids.\nSimply place it as child to the chart of your choice and (if necessary) set its direction.\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| svg | `{}` | an object containing  all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props)  |\n| direction | Grid.Direction.HORIZONTAL | The direction of the grid lines.   |\n| belowChart | true | whether or not to render below the chart |\n\n### Examples\nThere is a ton of examples over at [react-native-svg-chart-exampels](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n\n## License\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"58eaabafef6c01ddfc7ff306870af46d4ee47a4e","_id":"react-native-svg-charts@5.0.0-RC","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-64/5EzJ1aS4enDhKBDiKuIrVsyWd6eWn6h/W8K4butDZZkmvwoaIKOybl9sjXzrdSIg/dcG/DC3WVsw8MhASdg==","shasum":"3896c7f5c90e42641103b103ca26f5b9a6209dc0","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-5.0.0-RC.tgz","fileCount":43,"unpackedSize":155596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa01WpCRA9TVsSAnZWagAAl44QAI6a4EetExD3Y9aY8oxt\neqPWvWnIqn8yr6IiOShCIYUGdMkYwgY/2l5UafCEQmbu9MJUFvtvxUazy+MG\n1GCgjeo9t3kJfy5JkYglEjsCDfcBSnVHKuRuYueDFGJOxZyMl8aF+w2wWnxt\nTHAAIa4/bjDCTzoEx/tEL/D9xO0TRn3aLUzlMS4uFdPa0PkW7LQq7VVLR4bg\nvSN7bo740VUDupzZl7+KVPItInRD4VaaRTK9ahGstvQCq/b8IDjdnljrqGlZ\nq9xEcdracwc0Rusd2NgGxJXvJosJmLgrDd8Gmyeuh5Q5EspEtVavkVzBHMFU\nPBTDlOPonZAK49XaPZJoYipbCb97cwwDTb26BfM+aw7IearyEWg7bWN8vIcR\nKQqC6SUaRdvM+5x0e++gT3/Qy3g0yAyox81xcCPmhU+dJb0SbCtBGVFhDIM6\nBSRwYnLvUvh6Ae2bTr8kbcw0s7cINwm76YJqyutOu0VTdsbDJqeNCBaHCQdn\n67Rb6BX7yR0vqhOgZ3PY8MeHdddj179ubp88SeHkAFKlAJ15MHSAXhADyEqj\n9C6QPSpvUPdhC023hVSWbPhkX/VtHuNvbdfTcBwHOXdm5ITouiP+8cQ8emoN\nhraTVye1SuQriMZx60P3xh01OI76Por9Qilj4724tmyd21vBAJRY++H90qD3\nviM0\r\n=DbVB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD39/sv7gi+CKy4NszB0RqMh4OBVbin3L3w7QSWxBzhAQIhAOSaQLA4aRHjl01Di8TfoF9dTV19RxyQmMs9oof6NyTL"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_5.0.0-RC_1523799464354_0.08546407820207014"},"_hasShrinkwrap":false},"5.0.0-RC1":{"name":"react-native-svg-charts","version":"5.0.0-RC1","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^4.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.7.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native":"0.52.2","react-native-svg":"^6.2.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"readme":"# react-native-svg-charts\n\n[![version](https://img.shields.io/npm/v/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n[![downloads](https://img.shields.io/npm/dm/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n![circleci](https://circleci.com/gh/JesperLekland/react-native-svg-charts.svg?style=shield&circle-token=1a809ccdfbd0df3ed425a08f09c558401f794140)\n[![license](https://img.shields.io/npm/l/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n\nWelcome to react-native-svg-charts!\n\n### version 5 is now available!\nA much improved decorator system has been introduced, allowing for greater flexibility and less complexity.\nSee [releases](https://github.com/JesperLekland/react-native-svg-charts/releases) for more information.\n\n---\nIn order to not bloat this README to much we've moved some examples over to\n[`react-native-svg-charts-examples`](https://github.com/JesperLekland/react-native-svg-charts-examples).\nThere we will try to showcase the really cool things you can do with this library.\nThis README will try to keep things as simple as possible so that everybody can get up and running as fast as possible.\n\n\n## Prerequisites\n\nThis library uses [react-native-svg](https://github.com/react-native-community/react-native-svg)\nto render its graphs. Therefore this library needs to be installed **AND** linked into your project to work.\n\nOther than the above dependency this library uses pure javascript and supports both iOS and Android\n\n## Motivation\n\nCreating beautiful graphs in React Native shouldn't be hard or require a ton of knowledge.\nWe use [react-native-svg](https://github.com/react-native-community/react-native-svg) in order to render our SVG's and to provide you with great extensibility.\nWe utilize the very popular [d3](https://d3js.org/) library to create our SVG paths and to calculate the coordinates.\n\nWe built this library to be as extensible as possible while still providing you with the most common charts and data visualization tools out of the box.\nWe're very proud of our \"decorator\" support. All charts can be extended with \"decorators\", a component that somehow styles or enhances your chart.\nSimply pass in a `react-native-svg` compliant component as a child to the graph and it will be called with all the necessary information to layout your decorator.\nSee each chart for information on what data the decorator will be called with.\n\n\nFeedback and PR's are more than welcome 🙂\n\n## Running\n\nIf you want to test out the library you can clone this repository and run it.\nWe suggest that you test out the [storybooks](https://github.com/storybooks/storybook) that we've implemented.\nMost of the charts are implemented with [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs) so that you can tweak most properties and see their behavior live.\n\nClone the repo and run the following:\n\n```bash\nyarn\n\n# for iOS\n(cd ios && pod install)\nreact-native run-ios\n\n# for Android\nreact-native run-android\n\nyarn storybook\n\n# and then reload your device\n```\n\n\n\n\n## Common Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of arbitrary data - use prop `xAccessor`/`yAccessor`to tell the chart about the data structure|\n| yAccessor | ({ item }) => item | A function that takes each entry of `data` (named \"item\") as well as the index and returns the y-value of that entry |\n| xAccessor | ({ index }) => index | Same as `yAccessor` but returns the x-value of that entry|\n| yScale | d3Scale.scaleLinear | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand )|\n| xScale | d3Scale.scaleLinear | Same as `yScale` but for the x axis |\n| svg | `{}` | an object containing  all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props)|\n| animate | false | PropTypes.bool |\n| animationDuration | 300 | PropTypes.number |\n| style | undefined | Supports all [ViewStyleProps](https://facebook.github.io/react-native/docs/viewstyleproptypes.html) |\n| curve | d3.curveLinear | A function like [this](https://github.com/d3/d3-shape#curves) |\n| contentInset | { top: 0, left: 0, right: 0, bottom: 0 } | An object that specifies how much fake \"margin\" to use inside of the SVG canvas. This is particularly helpful on Android where `overflow: \"visible\"` isn't supported and might cause clipping. Note: important to have same contentInset on axis's and chart |\n| numberOfTicks | 10 | We use [d3-array](https://github.com/d3/d3-array#ticks) to evenly distribute the grid and dataPoints on the yAxis. This prop specifies how many \"ticks\" we should try to render. Note: important that this prop is the same on both the chart and on the yAxis |\n| showGrid | true | Whether or not to show the grid lines |\n| gridMin | undefined | Normally the graph tries to draw from edge to edge within the view bounds. Using this prop will allow the grid to reach further than the actual dataPoints. [Example](#gridmin/max) |\n| gridMax | undefined | The same as \"gridMin\" but will instead increase the grids maximum value |\n| children | undefined | One or many `react-native-svg` components that will be used to enhance your chart|\n\n## Common arguments to children\n\n| Property | Description |\n| --- | --- |\n| x | a function that normally accepts the index of a data point an returns its 'x' location on the canvas |\n| y | a function that normally accepts the value of a data point an returns its 'y' location on the canvas |\n| width | the width of the canvas in pixels |\n| height | the height of the canvas in pixels |\n| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point |\n| ticks | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids) |\n\n\n## Components\n\nThis library currently provides the following components\n* [Area](#areachart)\n* [StackedAreaChart](#stackedareachart)\n* [Bar](#barchart)\n* [StackedBarChart](#stackedbarchart)\n* [Line](#linechart)\n* [Pie](#piechart)\n* [ProgressCircle](#progresscircle)\n* [YAxis](#yaxis)\n* [XAxis](#xaxis)\n\nAlso see\n* [Children](#children)\n* [Grid](#grid)\n\n\n### AreaChart\n\n![Area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-chart.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { AreaChart, Grid } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass AreaChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <AreaChart\n                style={{ height: 200 }}\n                data={ data }\n                contentInset={{ top: 30, bottom: 30 }}\n                curve={ shape.curveNatural }\n                svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}\n            >\n                <Grid/>\n            </AreaChart>\n        )\n    }\n}\n```\n\n#### Props\n\nSee [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| start | 0 | The value of which the area should start (will always end on the data point)  |\n\n#### Arguments to children\n\nSupports all [Common arguments to children](#common-arguments-to-children)\n\n### StackedAreaChart\n\nVery similar to an area chart but with multiple sets of data stacked together. Notice that the `dataPoints` prop has changed to `data` and have a different signature.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\nSee [Area stack chart with Y axis](https://github.com/JesperLekland/react-native-svg-charts-examples/blob/master/storybook/stories/area-stack/with-y-axis.js) to see how to use a YAxis with this component\n\n![Stacked area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-stack.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { StackedAreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass StackedAreaExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#8800cc', '#aa00ff', '#cc66ff', '#eeccff' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <StackedAreaChart\n                style={ { height: 200, paddingVertical: 16 } }\n                data={ data }\n                keys={ keys }\n                colors={ colors }\n                curve={ shape.curveNatural }\n                showGrid={ false }\n            />\n        )\n    }\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries  |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n#### Arguments to children\n\n| Property | Description\n| --- | --- |\n| x | a function that normally accepts the index of a data points an returns its 'x' location on the canvas |\n| y | a function that normally accepts the value of a data points an returns its 'y' location on the canvas |\n| width | the width of the canvas in pixels |\n| height | the height of the canvas in pixels |\n| ~~data~~ | ~~the same data array provided to the chart, use this to map over your data points if you want decorators on each point~ |\n| ticks | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids) |\n\nThis chart does not call a child with the `data` argument. This is due to the fact that a lot of calculations go into\ncreating the stacked chart, meaning that the original `data` prop doesn't provide especially valuable information\nwhen trying to layout decorators. It does however call with the rest of the [common arguments](#common-arguments-to-children)\n\n### BarChart\n![Bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-chart.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { BarChart, Grid } from 'react-native-svg-charts'\n\nclass BarChartExample extends React.PureComponent {\n\n    render() {\n\n        const fill = 'rgb(134, 65, 244)'\n        const data   = [ 50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <BarChart\n                style={{ height: 200 }}\n                data={ data }\n                svg={{ fill }}\n                contentInset={{ top: 30, bottom: 30 }}\n            >\n                <Grid/>\n            </BarChart>\n        )\n    }\n\n}\n```\n\n### Props\nAlso see [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** |  The data prop in a barChart can look exactly like in a Line- or AreaChart, i.e an array of just numbers or complex objects. It can however also be an array with several data sets. A data object can contain a `svg` property which allows you two override styles on that specific object. See [the examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples)|\n| horizontal | false | Boolean whether or not the bars should be horizontal |\n| svg | `{}` | Default svg props **for all bars**. Supports all svg props an svg path normally supports. This styles will be overriden if there are specific styles for a given data object  |\n| spacingInner | 0.05 | Spacing between the bars (or groups of bars) |\n| spacingOuter | 0.05 | Spacing outside of the bars (or groups of bars). Percentage of one bars width |\n| contentInset | `{ top: 0, left: 0, right: 0, bottom: 0 }` | PropTypes.shape |\n\n#### Arguments to children\n\n| Property | Description\n| --- | --- |\n| bandwidth |  the width of a band (a.k.a bar) |\n\nAlso supports all [Common arguments to children](#common-arguments-to-children)\n\n### StackedBarChart\n\nThe same as the [StackedAreaChart](#stackedareachart) except with bars.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\n\n![Stacked bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack.png)\n![Stacked bar chart - horizontal](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack-horizontal.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { StackedBarChart } from 'react-native-svg-charts'\n\nclass StackedBarChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n                oranges: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#7b4173', '#a55194', '#ce6dbd', '#de9ed6' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <StackedBarChart\n                style={ { height: 200 } }\n                keys={ keys }\n                colors={ colors }\n                data={ data }\n                showGrid={ false }\n                contentInset={ { top: 30, bottom: 30 } }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries  |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| horizontal | false | Boolean whether or not the bars should be horizontal |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n#### Arguments to children\n\n| Property | Description |\n| --- | --- |\n| x | a function that normally accepts the index of a data points an returns its 'x' location on the canvas |\n| y | a function that normally accepts the value of a data points an returns its 'y' location on the canvas |\n| width | the width of the canvas in pixels |\n| height | the height of the canvas in pixels |\n| ~~data~~ | ~~the same data array provided to the chart, use this to map over your data points if you want decorators on each point~~ |\n| ticks | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids) |\n\nThis chart does not call a child with the `data` argument. This is due to the fact that a lot of calculations go into\ncreating the stacked chart, meaning that the original `data` prop doesn't provide especially valuable information\nwhen trying to layout decorators. It does however call with the rest of the [common arguments](#common-arguments-to-children)\n\n### LineChart\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/line-chart.png)\n\n#### Example\n\n```javascript\nimport React from 'react'\nimport { LineChart, Grid } from 'react-native-svg-charts'\n\nclass LineChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <LineChart\n                style={{ height: 200 }}\n                data={ data }\n                svg={{ stroke: 'rgb(134, 65, 244)' }}\n                contentInset={{ top: 20, bottom: 20 }}\n            >\n                <Grid/>\n            </LineChart>\n        )\n    }\n\n}\n\n```\n\n#### Props\nSee [Common Props](#common-props)\n\n#### Arguments to children\n\nSupports all [Common arguments to children](#common-arguments-to-children)\n\n### PieChart\n\nThe PieChart is a really nice component with great support for custom behavior.\nSee more examples in the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n![Pie chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/pie-chart.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { PieChart } from 'react-native-svg-charts'\n\nclass PieChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const randomColor = () => ('#' + (Math.random() * 0xFFFFFF << 0).toString(16) + '000000').slice(0, 7)\n\n        const pieData = data\n            .filter(value => value > 0)\n            .map((value, index) => ({\n                value,\n                svg: {\n                    fill: randomColor(),\n                    onPress: () => console.log('press', index),\n                },\n                key: `pie-${index}`,\n            }))\n\n        return (\n            <PieChart\n                style={ { height: 200 } }\n                data={ pieData }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | Very similar to the data prop of our other charts, the only exception is that the PieChart only accepts complex objects (not just numbers). An item can also contain the `arc` property which allows you two override settings on that specific arc. See [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) |\n| valueAccessor | ({ item }) => item.value | Very similar to the `yAccessor` of the other charts |\n| outerRadius | \"100%\" | The outer radius, use this to tweak how close your pie is to the edge of it's container. Takes either percentages or absolute numbers (pixels) |\n| innerRadius | \"50%\" | The inner radius, use this to create a donut. Takes either percentages or absolute numbers (pixels) |\n| labelRadius | undefined | The radius of the circle that will help you layout your labels. Takes either percentages or absolute numbers (pixels) |\n| padAngle | |  The angle between the slices |\n| sort | `(a,b) => b.value - a.value` | Like any normal sort function it expects either 0, a positive or negative return value. The arguments are each an object from the `dataPoints` array |\n\n#### Arguments to children\n\n| Property | Description\n| --- | --- |\n| width | the width of the canvas in pixels\n| height | the height of the canvas in pixels\n| slices | an array of the pie chart slices. See source code and examples for what it includes\n| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point\n\n\n### ProgressCircle\n![Progress circle](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/progress-circle.png)\n\n#### Example\n```javascript\nimport React from 'react'\nimport { ProgressCircle }  from 'react-native-svg-charts'\n\nclass ProgressCircleExample extends React.PureComponent {\n\n    render() {\n\n        return (\n            <ProgressCircle\n                style={ { height: 200 } }\n                progress={ 0.7 }\n                progressColor={'rgb(134, 65, 244)'}\n            />\n        )\n    }\n\n}\n\n```\n\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| progress | **required** | PropTypes.number.isRequired |\n| progressColor | 'black' | PropTypes.any |\n| backgroundColor | '#ECECEC' |  PropTypes.any |\n| startAngle | `0` | PropTypes.number |\n| endAngle | `Math.PI * 2` |  PropTypes.number |\n| strokeWidth | 5 |  PropTypes.number |\n\n#### Arguments to children\n\n| Property | Description\n| --- | --- |\n| width | the width of the canvas in pixels |\n| height | the height of the canvas in pixels |\n| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point |\n\n\n### YAxis\n\n![Y-axis](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/y-axis.png)\n\nA helper component to layout your Y-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the YAxis has the same vertical contentInset.\n\n#### Example\n```javascript\nimport React from 'react'\nimport { LineChart, YAxis, Grid } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass YAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const contentInset = { top: 20, bottom: 20 }\n\n        return (\n            <View style={{ height: 200, flexDirection: 'row' }}>\n                <YAxis\n                    data={ data }\n                    contentInset={ contentInset }\n                    svg={{\n                        fill: 'grey',\n                        fontSize: 10,\n                    }}\n                    numberOfTicks={ 10 }\n                    formatLabel={ value => `${value}ºC` }\n                />\n                <LineChart\n                    style={{ flex: 1, marginLeft: 16 }}\n                    data={ data }\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                    contentInset={ contentInset }\n                >\n                    <Grid/>\n                </LineChart>\n            </View>\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n(see [Common Props](#common-props))\n\n| Property | Default | Description |\n| --- | --- | --- |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `yScale`, *or* d3Scale.scaleBand if used in conjunction with a horizontal BarChart |\n| svg | `{}` | supports all svg props an svg text normally supports |\n| spacingInner | 0.05 | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingInner` prop on the actual BarChart |\n| spacingOuter | 0.05 | Spacing outside of the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingOuter` prop on the actual BarChart  |\n| formatLabel | `value => {}` | A utility function to format the text before it is displayed, e.g `value => \"$\" + value |\n| contentInset | { top: 0, bottom: 0 } | Used to sync layout with chart (if same prop used there) |\n| min | undefined | Used to sync layout with chart (if gridMin is used there) |\n| max | undefined | Used to sync layout with chart (if gridMax is used there) |\n\n#### Arguments to children\n\nNo arguments\n\n\n### XAxis\n\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/x-axis.png)\n\nA helper component to layout your X-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the XAxis has the same horizontal contentInset.\n\nThe XAxis also supports the `xAccessor` prop, if it's not supplied it will assume that you're only interested in the index of the data set.\n\n#### Example\n```javascript\nimport React from 'react'\nimport { LineChart, XAxis, Grid } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass XAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <View style={{ height: 200, padding: 20 }}>\n                <LineChart\n                    style={{ flex: 1 }}\n                    data={ data }\n                    gridMin={ 0 }\n                    contentInset={{ top: 10, bottom: 10 }}\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                >\n                    <Grid/>\n                </LineChart>\n                <XAxis\n                    style={{ marginHorizontal: -10 }}\n                    data={ data }\n                    formatLabel={ (value, index) => index }\n                    contentInset={{ left: 10, right: 10 }}\n                    svg={{ fontSize: 10, fill: 'black' }}\n                />\n            </View>\n        )\n    }\n}\n\n```\n\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of values or objects to render on the xAxis. Should preferably have the same length as the chart's dataPoints. If a complex object is used instead of a simple value, a `xAccessor`  prop **is required** to calculate the axis' extent. A data object can contain a `svg` property which allows you to override styles on that specific object  |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `xScale` |\n| spacingInner | 0.05 | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingInner` prop on the actual BarChart |\n| spacingOuter | 0.05 | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingOuter` prop on the actual BarChart |\n| svg | `{}` | Default svg props **for all labels**. Supports all svg props an svg text normally supports. This styles will be overriden if there are specific styles for a given data object  |\n| formatLabel | `value => value` | A utility function to format the text before it is displayed, e.g `value => \"day\" + value`. Passes back the value provided by the `xAccessor` |\n| contentInset | { left: 0, right: 0 } | Used to sync layout with chart (if same prop used there) |\n\n#### Arguments to children\n\nNo arguments\n\n### Children\n\nNew for version 5.0.\nEach chart (and axes) component now accepts React children. *Important*  note is that all children must be a `react-native-svg` component\non order for it to be rendered by the chart. This API deprecates the old one with `extras` and `decorators`.\nEverything that should be rendered above or below the chart should now be supplied as a child to said chart.\nThis allows you to declare the order in which your decorators should be rendered. If you want anything rendered below the chart,\nsimply add the prop `belowChart={true}`. There's a ton of examples in the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples), go and have a look.\n\n\n### Grid\n\nThis library provides a helper component for drawing grids.\nSimply place it as child to the chart of your choice and (if necessary) set its direction.\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| svg | `{}` | an object containing  all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props)  |\n| direction | Grid.Direction.HORIZONTAL | The direction of the grid lines.   |\n| belowChart | true | whether or not to render below the chart |\n\n### Examples\nThere is a ton of examples over at [react-native-svg-chart-exampels](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n\n## License\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"58eaabafef6c01ddfc7ff306870af46d4ee47a4e","_id":"react-native-svg-charts@5.0.0-RC1","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-C7Cr7XaNb7AbuUDVc99c1lYxw4NGVGJoi8k7cVs3/3aBqmubZX4M18dC/SiK4it6UQsdWbBkPD4PE0iBtWhk4w==","shasum":"c14514b041e9ff7a0d314333ab9271160a8c164d","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-5.0.0-RC1.tgz","fileCount":43,"unpackedSize":154860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa0136CRA9TVsSAnZWagAAtt0P/2AsXSVIZBdU2qJkd/Tr\nAx6EzxMu+cCSeUukOK4tsdOezfBZCYskqbUm2GgrdJ1AlImEgQ5noPW8/zKb\nhTBJifKgIoYFZ5JUaCky/4wCfqSFp1w5c+V4XyDzzOk7mez7EMIpmiOCLCOt\nIdrwr5hhUTviPRtZ/OEm2JPw3g0lhxNAnhKJtPcF3PQBCMEoXZRdjrWvthpl\nNhqBqCc0ou026R8ZAX2gzxqQ+XHlVQdZsh4t/jUuqzviJQuL7Eent+2ZUwEt\nkx4ifYbQMt5lf6xNWnfElT2RXyzOqJnZHHrLkrckffhxzbiyZ5h3R2wvcgcB\nrpFe7Zx1Lr76X/3AgVyBXzDknW2TioYbkZx/tg5PZlVaYvtoppt0TqSbdZch\n4KCaIEWj7YyLu//iWGc4mfFJoJ59+xriS8jXC7/JKKjwV0/jmeI98uUr2wia\n5PPUxTcHJ0MeW3mP0e9EqUgjVovQiE1vgqKWy+KfK17utSWmZXk1KW1ZJN0Q\nJdOWtFGnbf3skWYw+HPkmf0URpfxEXtGtBof5XQGNb2omCvmRxnaI8xyO5/u\njDCMY6y1uLmLSTVT6Sh7aS8mdhxQV+NiwKHNKmxd05j4xIt4Bq5VZfHFriLK\nC7g9LbnjOAMd68GVDYgrxUsDowqfZVchdmbKM2YBjz70n6vdXKEeusz8wG1P\npoW0\r\n=WRdr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzhxDT9Y5rechryR7rBU81YWBDkULvmCmdsLvRMiaXSAiEAqz+sCcAyoeK4JauK2CF0lMUcdWZzPtcpInySol70ZgQ="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_5.0.0-RC1_1523801594077_0.7325362425602804"},"_hasShrinkwrap":false},"5.0.0":{"name":"react-native-svg-charts","version":"5.0.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^4.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.7.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","jest":"20.0.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native":"0.52.2","react-native-svg":"^6.2.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"30026e5ba354ef24525b10f1362d97384a94798a","_id":"react-native-svg-charts@5.0.0","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-xu1WUut+K0DrrxmTFk//lsk6yJK5klCjBuA+l84Xec2m55lFelM5bq+Vl614rKMEIrfIV8pfUqIGxX/BRdUigQ==","shasum":"bab44a259186c354d3a54cc5963003f1a71d183b","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-5.0.0.tgz","fileCount":43,"unpackedSize":160990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa02UoCRA9TVsSAnZWagAABJwQAI/Ic8T+3Cb7KtIvmXxQ\ntbKC/23w5iap6fisM1gJERMAISpLC+IhA6Fd+3J1pfZQ/1PzgdmtBtwMjkRh\nSHKIiuGjaDvspIuQalFUtduNa9ysoKm2Q1zWrzobSTG/Bq1x0aM5ZXRYHGHT\nVCKOAVgrw2nxs3hBJYhkNnbxuA1u6rpaIbAC6DOnf7inDWQP3kzdXqOx7d9w\n9uHUEiimFhaM/2TXRrFfQFjObVVPeGIizbWzPy/R/Jg96oD0FiPd9J0o0JbW\nrbT9OcJrc7yqMzEFdblAuZ3WuSbSv6B49zdbFQgxbAErzRjhJHie8e2e6uqs\nkPIJHGBn0O8nzOBFvuyNaC+77qy+NUVc535+yvu0u5CMKbYZXNT+fqb1IRBd\npU+YISkjO6TjN051ihhVEHVkreoaNcyeencBiq3UCmDidTrpkdxiF3EhCeMf\niHznUEkVrmDDD8184mkVoJpvsc4msBDNoRrtkvwasrS19RUVwp4ZpZ1umDej\nSBQ3TmhUkCAMfeE4CAReYxqKKyJ8Kb/Z/F7gRbdmbKI8ivD8J3rnC2ycNhrp\nmXdTb/MQ+ak2Z4k82XhRth+VBA1qpK/bqrdrBHUUwwfu4CvNgbe+9mZN3oRG\nQpiI3J8sW6eGRriVD3jJEAPF7LLYWuJIqaraO6YhPGa9PApncU3zF9Rgrzlk\nBKZn\r\n=sWUx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcmoKFNQ4nWbojrdAOyUQh4eARuukUYW8LRHv9KoTT2gIgLVGq+vbhdB5Sy80nYs0BVx8bFpZ+Yp5GIegpxyaUs0E="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_5.0.0_1523803431166_0.004367153953099612"},"_hasShrinkwrap":false},"5.1.0":{"name":"react-native-svg-charts","version":"5.1.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"husky":{"hooks":{"pre-commit":"yarn lint-staged"}},"lint-staged":{"*.js":"eslint"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^4.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.7.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","husky":"^1.0.0-rc.8","jest":"20.0.1","lint-staged":"^7.1.3","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native":"0.52.2","react-native-svg":"^6.2.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"34ba5528a28f51312d7bafe488a32ee24747b74d","_id":"react-native-svg-charts@5.1.0","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-sFXCdug4JfFsJP3bE6/sFmJN8npcLhqax2htJ+OpWR1ANbtazvLPW6fDPA7fjuFmII9o3UrVTh6bNIUehQLqpQ==","shasum":"a90c69f165038889b6a4f342d84e9eefcff7b832","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-5.1.0.tgz","fileCount":43,"unpackedSize":160953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbE9q3CRA9TVsSAnZWagAApOQP/1iqGP956ako2uuOVtFT\nKqz/0WGpt0r7UTXPCkxkK5QYrPumzNtwDDwYTsdb0TNosT6dsz1k9W7yTyWW\ntwtWIZxKiF3txVXUzVXl7JWNiENuioOLQi8RQ1qDZk2S4xbU0Yy4kWCmtCJN\n/90FeR5SjyOATHduQw2uaUp9FfwA35c+/ZghfjYr53UJ/batsZmXuZGgI4SH\n2envvV6+sD4PJLplSCqdLX/LitOmtd8/IBNOwxbeDmr6CqSynfbkn3N2LNtk\njU7zkD10Wl9XsCMxWVTd06fqDnrDV39EUojQh6imS86DbukNSzjSs9nIruJs\nCBlV9+pDq9x0MkfrhlrBhhhGmFHCX4RtKEhdAdsYvdUmxT2AF8bay4ikIKgW\nTSYLWoe6SgXWnhPpea5cGTQ5Enz3UsNILedzXADOyHLr5O2zH9XbJotJyyjx\n1Ehi55fY6lAkzD/Cc2y/HxZt6K7RQ71soHTo4PcaPKJw/u8cFvwkA3wtjL88\nfsFZNR6dCYYimra/hTg6Pby7s8xH15SSlDOO08x7yEnErQaiOFd+B1pVdWOl\nWsNSlSRt3WCcZasyStaBB/Vi2RuwdgnaGTPCMcrscPMkok34Y6RUn01a6kMD\nzSX5/QH70UTB3R+giJNy8NdZ7x/2Y8149n795PGCjs3RrKIx66Lsgma7HCuP\n1HCu\r\n=sHIq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWx9eoZ7uda+0eL47FdRPd2GdWqFWSfiKvvq+ijDQcqwIhAJphaFUyDDCf3J/dm5/C4zz+vzUAo/irB7BQjX9UE2Ao"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_5.1.0_1528027829305_0.05060503907165659"},"_hasShrinkwrap":false},"5.1.1":{"name":"react-native-svg-charts","version":"5.1.1","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"husky":{"hooks":{"pre-commit":"yarn lint-staged"}},"lint-staged":{"*.js":"eslint"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","date-fns":"^1.28.5","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^4.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.7.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","husky":"^1.0.0-rc.8","jest":"20.0.1","lint-staged":"^7.1.3","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native":"0.52.2","react-native-svg":"^6.2.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"623622ef88a3a263e9754847cdbf624db13b5ea5","_id":"react-native-svg-charts@5.1.1","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-YMazpKVKBR1XgmIkZPuo97saNIbDDqevTTIF2OYxPGKSNaLcnrFA6A/q7dGn6ZZbsOTOnrYhCKe81K42R7YzWg==","shasum":"b397f42de016eebad5142d98311deaf82a00b853","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-5.1.1.tgz","fileCount":43,"unpackedSize":161289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbE93PCRA9TVsSAnZWagAAPyMP/i9weNtPt6qiph9lILbE\n4i3vDM5/KRGUJ5wQnsAvzQIJT7Cjw3UK6rQoJ8t7nXwaqQwkC4ptTs8dBOyj\nLb1VqJWujgLb9z3AKqGbRrZjviT6CoL3SQDnt7sX2z2rZOo1E6YgB3vt0Kei\nM9P5sXT4c2d8jQDMQuGcnq4XVTew0aDPqMVKjwSruzixAFhIVMfO7eFi301B\nXbSOYoX03ewPSYqppDEV0lu7weCrYo5fp3yvzz2wNO2k1gqsg+Rim3RKD2YY\nDHqMRvBt2O11vGypJ8ktb0X4KHAKB39Z4AiT/+icl31B6+0OIMjuVo66vnY7\n1gBwz6bw4MKoGeRPy/oZGdEh19+OADKxB8Bg8WxzLJo45OiawT8hLe6D/sWH\nUngjR8FyQot/WmQG13UN4qBs3YFGm/q/DtqqQjSc2LtLFhyWuOh4s4Aqn92k\na99L34l1pOkcD9DTbyFsQ76OZWtTWNgKmWdfCtTecXkVRZpHY89zsramSVG0\nszihz5KHTbHF/+G4G8Kx3QGaIYf9SO5A3kyy73PXYfAM5Zqr5/Tyvse7/vDm\nJBWnQTOThbUL//+PES+cogIQFXzKJn6SdmxndNAG9rqlfSF89LD7YQVRi2L1\np2dbgaBaTs0B5FFk/dPRsQr0/hrlVigsP7dthxyl/I7HTKHR8MSXqTobAZZi\nGx64\r\n=KkpB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0dWwHNFS0PhrELAnRwd/Jtxqm4ZvyUV3UzzgL/2xreAIhALCri5a6EWqjcsp0b9+tKE0r2mAr8zhalSYDDPUn/Krd"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_5.1.1_1528028621031_0.9992620025636216"},"_hasShrinkwrap":false},"5.2.0":{"name":"react-native-svg-charts","version":"5.2.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"husky":{"hooks":{"pre-commit":"yarn lint-staged"}},"lint-staged":{"*.js":"eslint"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"date-fns":"^1.28.5","@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^4.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.7.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","husky":"^1.0.0-rc.8","jest":"20.0.1","lint-staged":"^7.1.3","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native":"0.52.2","react-native-svg":"^6.2.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"7d0c73cc781e2e3bb675142acd320e956b68f3db","_id":"react-native-svg-charts@5.2.0","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-2cV9/QDqXdq9ve1NbTAKVO9BQrYqC69R5Tlo+LgGAIdl6BEVQbushO20vJkN4+d680KKUemyode0yJ7gNwdZNQ==","shasum":"eda090136250d02f9d1d8c971663afaee4ed2f4f","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-5.2.0.tgz","fileCount":43,"unpackedSize":166581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbHWooCRA9TVsSAnZWagAAQmEP/i3SUfBGjbVb4oLR6gKu\nzwBl+cmR4pbLsgN/B1q5RuT2PXnBgVu4w5NCxq4nmY6B2auiV934Or6voDT/\nP/9coD0I2ijLp5z+tQgfMcAHLPt8D4dnsw/FUHj6yM3zEbX5X1OX6HyapfKk\n2MairsAF2Kn+5kDs0w7XZNCNcUT5nslaFU9dRRgC3xV03gL+ecpBXYNIzk1V\nEvqQg6Yyz5DwKjuxfFmTqYOBY0BzzPcEKdgA+TMc8E8ire1DvC+YIpV3syFi\naIBawgTu244+EN60LAUwdkDIkzjP3SxfsnFvHu6lBVO6D5qcz5RvCX2xbzUd\nkW8kBE284GkvfrdocOKBEalMIhaxpRwWjWMfwFlFXpou43dW/YvChV0Lem3Z\npmIh6v6MztmTJGFcX5S5PUFJSO3elZ7VjqmuRmMw8dpvzQEjfigEYLRyvwe2\nIndH/errYtvuJ9ZDf5sVOOWbMdQqEvwqw0MZoyfYL8LJouqkJ5XxpEMAR0yJ\ndKqzvh5GoviOis+Ii1zqs3HBbARB8JfmzXLfh8PIXduhL4obsQDde6pwoWC/\n22bIWJ7EECniiWxGyc1Gn2Pw1B20CmXjIAeh65A/MOmOLuk1hQbRESHVoswQ\ndMrp78v+WZwo4XI2chVkFFl2cVj+X2s8NQXJieXcI7fISBMw8GzBG/Qa2RjE\nPx+i\r\n=XmyF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHl68fdHeuUN2w89GaHwQMbcMPWESM8q1Oh/Xk0TGJwwIgeKFvWQaM8c9ygfx0Z/1hH9reqDXQyQOob1sEbEQSoEo="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_5.2.0_1528654374424_0.6421471502282103"},"_hasShrinkwrap":false},"5.2.1":{"name":"react-native-svg-charts","version":"5.2.1","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"husky":{"hooks":{"pre-commit":"yarn lint-staged"}},"lint-staged":{"*.js":"eslint"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1"},"devDependencies":{"date-fns":"^1.28.5","@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","eslint":"^4.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.7.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","husky":"^1.0.0-rc.8","jest":"20.0.1","lint-staged":"^7.1.3","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native":"0.52.2","react-native-svg":"^6.2.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"readme":"# react-native-svg-charts\n\n[![version](https://img.shields.io/npm/v/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n[![downloads](https://img.shields.io/npm/dm/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n![circleci](https://circleci.com/gh/JesperLekland/react-native-svg-charts.svg?style=shield&circle-token=1a809ccdfbd0df3ed425a08f09c558401f794140)\n[![license](https://img.shields.io/npm/l/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n\nWelcome to react-native-svg-charts!\n\n### version 5 is now available!\nA much improved decorator system has been introduced, allowing for greater flexibility and less complexity.\nSee [releases](https://github.com/JesperLekland/react-native-svg-charts/releases) for more information.\n\n---\nIn order to not bloat this README to much we've moved some examples over to\n[`react-native-svg-charts-examples`](https://github.com/JesperLekland/react-native-svg-charts-examples).\nThere we will try to showcase the really cool things you can do with this library.\nThis README will try to keep things as simple as possible so that everybody can get up and running as fast as possible.\n\n\n## Prerequisites\n\nThis library uses [react-native-svg](https://github.com/react-native-community/react-native-svg)\nto render its graphs. Therefore this library needs to be installed **AND** linked into your project to work.\n\nOther than the above dependency this library uses pure javascript and supports both iOS and Android\n\n## Motivation\n\nCreating beautiful graphs in React Native shouldn't be hard or require a ton of knowledge.\nWe use [react-native-svg](https://github.com/react-native-community/react-native-svg) in order to render our SVG's and to provide you with great extensibility.\nWe utilize the very popular [d3](https://d3js.org/) library to create our SVG paths and to calculate the coordinates.\n\nWe built this library to be as extensible as possible while still providing you with the most common charts and data visualization tools out of the box.\nWe're very proud of our \"decorator\" support. All charts can be extended with \"decorators\", a component that somehow styles or enhances your chart.\nSimply pass in a `react-native-svg` compliant component as a child to the graph and it will be called with all the necessary information to layout your decorator.\nSee each chart for information on what data the decorator will be called with.\n\n\nFeedback and PR's are more than welcome 🙂\n\n## Running\n\nIf you want to test out the library you can clone this repository and run it.\nWe suggest that you test out the [storybooks](https://github.com/storybooks/storybook) that we've implemented.\nMost of the charts are implemented with [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs) so that you can tweak most properties and see their behavior live.\n\nClone the repo and run the following:\n\n```bash\nyarn\n\n# for iOS\n(cd ios && pod install)\nreact-native run-ios\n\n# for Android\nreact-native run-android\n\nyarn storybook\n\n# and then reload your device\n```\n\n\n\n\n## Common Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of arbitrary data - use prop `xAccessor`/`yAccessor`to tell the chart about the data structure|\n| yAccessor | ({ item }) => item | A function that takes each entry of `data` (named \"item\") as well as the index and returns the y-value of that entry |\n| xAccessor | ({ index }) => index | Same as `yAccessor` but returns the x-value of that entry|\n| yScale | d3Scale.scaleLinear | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand )|\n| xScale | d3Scale.scaleLinear | Same as `yScale` but for the x axis |\n| svg | `{}` | an object containing  all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props)|\n| animate | false | PropTypes.bool |\n| animationDuration | 300 | PropTypes.number |\n| style | undefined | Supports all [ViewStyleProps](https://facebook.github.io/react-native/docs/viewstyleproptypes.html) |\n| curve | d3.curveLinear | A function like [this](https://github.com/d3/d3-shape#curves) |\n| contentInset | { top: 0, left: 0, right: 0, bottom: 0 } | An object that specifies how much fake \"margin\" to use inside of the SVG canvas. This is particularly helpful on Android where `overflow: \"visible\"` isn't supported and might cause clipping. Note: important to have same contentInset on axis's and chart |\n| numberOfTicks | 10 | We use [d3-array](https://github.com/d3/d3-array#ticks) to evenly distribute the grid and dataPoints on the yAxis. This prop specifies how many \"ticks\" we should try to render. Note: important that this prop is the same on both the chart and on the yAxis |\n| showGrid | true | Whether or not to show the grid lines |\n| yMin | undefined | Alter how the chart bounds are calculated |\n| yMax | undefined | Alter how the chart bounds are calculated |\n| xMin | undefined | Alter how the chart bounds are calculated |\n| xMax | undefined | Alter how the chart bounds are calculated |\n| children | undefined | One or many `react-native-svg` components that will be used to enhance your chart |\n\n## Common arguments to children\n\n| Property | Description |\n| --- | --- |\n| x | a function that normally accepts the index of a data point an returns its 'x' location on the canvas |\n| y | a function that normally accepts the value of a data point an returns its 'y' location on the canvas |\n| width | the width of the canvas in pixels |\n| height | the height of the canvas in pixels |\n| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point |\n| ticks | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids) |\n\n\n## Components\n\nThis library currently provides the following components\n* [Area](#areachart)\n* [StackedAreaChart](#stackedareachart)\n* [Bar](#barchart)\n* [StackedBarChart](#stackedbarchart)\n* [Line](#linechart)\n* [Pie](#piechart)\n* [ProgressCircle](#progresscircle)\n* [YAxis](#yaxis)\n* [XAxis](#xaxis)\n\nAlso see\n* [Children](#children)\n* [Grid](#grid)\n\n\n### AreaChart\n\n![Area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-chart.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { AreaChart, Grid } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass AreaChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <AreaChart\n                style={{ height: 200 }}\n                data={ data }\n                contentInset={{ top: 30, bottom: 30 }}\n                curve={ shape.curveNatural }\n                svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}\n            >\n                <Grid/>\n            </AreaChart>\n        )\n    }\n}\n```\n\n#### Props\n\nSee [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| start | 0 | The value of which the area should start (will always end on the data point)  |\n\n#### Arguments to children\n\nSupports all [Common arguments to children](#common-arguments-to-children)\n\n### StackedAreaChart\n\nVery similar to an area chart but with multiple sets of data stacked together.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\nSee [Area stack chart with Y axis](https://github.com/JesperLekland/react-native-svg-charts-examples/blob/master/storybook/stories/area-stack/with-y-axis.js) to see how to use a YAxis with this component\nUse the `svgs` prop to pass in `react-native-svg` compliant props to each area.\n\n![Stacked area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-stack.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { StackedAreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass StackedAreaExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#8800cc', '#aa00ff', '#cc66ff', '#eeccff' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n        const svgs = [\n                    { onPress: () => console.log('apples') },\n                    { onPress: () => console.log('bananas') },\n                    { onPress: () => console.log('cherries') },\n                    { onPress: () => console.log('dates') },\n                ]\n\n        return (\n            <StackedAreaChart\n                style={ { height: 200, paddingVertical: 16 } }\n                data={ data }\n                keys={ keys }\n                colors={ colors }\n                curve={ shape.curveNatural }\n                showGrid={ false }\n                svgs={ svgs }\n            />\n        )\n    }\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries  |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n#### Arguments to children\n\n| Property | Description\n| --- | --- |\n| x | a function that normally accepts the index of a data points an returns its 'x' location on the canvas |\n| y | a function that normally accepts the value of a data points an returns its 'y' location on the canvas |\n| width | the width of the canvas in pixels |\n| height | the height of the canvas in pixels |\n| ~~data~~ | ~~the same data array provided to the chart, use this to map over your data points if you want decorators on each point~ |\n| ticks | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids) |\n\nThis chart does not call a child with the `data` argument. This is due to the fact that a lot of calculations go into\ncreating the stacked chart, meaning that the original `data` prop doesn't provide especially valuable information\nwhen trying to layout decorators. It does however call with the rest of the [common arguments](#common-arguments-to-children)\n\n### BarChart\n![Bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-chart.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { BarChart, Grid } from 'react-native-svg-charts'\n\nclass BarChartExample extends React.PureComponent {\n\n    render() {\n\n        const fill = 'rgb(134, 65, 244)'\n        const data   = [ 50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <BarChart\n                style={{ height: 200 }}\n                data={ data }\n                svg={{ fill }}\n                contentInset={{ top: 30, bottom: 30 }}\n            >\n                <Grid/>\n            </BarChart>\n        )\n    }\n\n}\n```\n\n### Props\nAlso see [Common Props](#common-props)\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** |  The data prop in a barChart can look exactly like in a Line- or AreaChart, i.e an array of just numbers or complex objects. It can however also be an array with several data sets. A data object can contain a `svg` property which allows you two override styles on that specific object. See [the examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples)|\n| horizontal | false | Boolean whether or not the bars should be horizontal |\n| svg | `{}` | Default svg props **for all bars**. Supports all svg props an svg path normally supports. This styles will be overriden if there are specific styles for a given data object  |\n| spacingInner | 0.05 | Spacing between the bars (or groups of bars) |\n| spacingOuter | 0.05 | Spacing outside of the bars (or groups of bars). Percentage of one bars width |\n| contentInset | `{ top: 0, left: 0, right: 0, bottom: 0 }` | PropTypes.shape |\n\n#### Arguments to children\n\n| Property | Description\n| --- | --- |\n| bandwidth |  the width of a band (a.k.a bar) |\n\nAlso supports all [Common arguments to children](#common-arguments-to-children)\n\n### StackedBarChart\n\nThe same as the [StackedAreaChart](#stackedareachart) except with bars (and different `svgs` prop).\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\n\nThe `svgs` prop here is not based on keys, but rather entries, as the user might want to specify different props\nfor each entry in each bar. Therefore each key entry can contain a complex object that contains e.g an `svg` prop. See [this example](./storybook/stories/bar-stack/with-on-press.js) for inspiration\n\n\n![Stacked bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack.png)\n![Stacked bar chart - horizontal](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack-horizontal.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { StackedBarChart } from 'react-native-svg-charts'\n\nclass StackedBarChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n                oranges: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = [ '#7b4173', '#a55194', '#ce6dbd', '#de9ed6' ]\n        const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]\n\n        return (\n            <StackedBarChart\n                style={ { height: 200 } }\n                keys={ keys }\n                colors={ colors }\n                data={ data }\n                showGrid={ false }\n                contentInset={ { top: 30, bottom: 30 } }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of the data entries: each value can be a number or a complex object with custom `svg` props for example |\n| keys | **required** | This array should contain the object keys of interest (see above example)\n| colors | **required** | An array of equal size as `keys` with the color for each key |\n| valueAccessor | ({ item, key }) => item[key] | Very similar to the `yAccessor` of the other charts, usually needed when using complex objects as values |\n| horizontal | false | Boolean whether or not the bars should be horizontal |\n| order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas |\n| offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas |\n\nAlso see [Common Props](#common-props)\n\n#### Arguments to children\n\n| Property | Description |\n| --- | --- |\n| x | a function that normally accepts the index of a data points an returns its 'x' location on the canvas |\n| y | a function that normally accepts the value of a data points an returns its 'y' location on the canvas |\n| width | the width of the canvas in pixels |\n| height | the height of the canvas in pixels |\n| ~~data~~ | ~~the same data array provided to the chart, use this to map over your data points if you want decorators on each point~~ |\n| ticks | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids) |\n\nThis chart does not call a child with the `data` argument. This is due to the fact that a lot of calculations go into\ncreating the stacked chart, meaning that the original `data` prop doesn't provide especially valuable information\nwhen trying to layout decorators. It does however call with the rest of the [common arguments](#common-arguments-to-children)\n\n### LineChart\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/line-chart.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { LineChart, Grid } from 'react-native-svg-charts'\n\nclass LineChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <LineChart\n                style={{ height: 200 }}\n                data={ data }\n                svg={{ stroke: 'rgb(134, 65, 244)' }}\n                contentInset={{ top: 20, bottom: 20 }}\n            >\n                <Grid/>\n            </LineChart>\n        )\n    }\n\n}\n\n```\n\n#### Props\nSee [Common Props](#common-props)\n\n#### Arguments to children\n\nSupports all [Common arguments to children](#common-arguments-to-children)\n\n### PieChart\n\nThe PieChart is a really nice component with great support for custom behavior.\nSee more examples in the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n![Pie chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/pie-chart.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { PieChart } from 'react-native-svg-charts'\n\nclass PieChartExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const randomColor = () => ('#' + (Math.random() * 0xFFFFFF << 0).toString(16) + '000000').slice(0, 7)\n\n        const pieData = data\n            .filter(value => value > 0)\n            .map((value, index) => ({\n                value,\n                svg: {\n                    fill: randomColor(),\n                    onPress: () => console.log('press', index),\n                },\n                key: `pie-${index}`,\n            }))\n\n        return (\n            <PieChart\n                style={ { height: 200 } }\n                data={ pieData }\n            />\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | Very similar to the data prop of our other charts, the only exception is that the PieChart only accepts complex objects (not just numbers). An item can also contain the `arc` property which allows you two override settings on that specific arc. See [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) |\n| valueAccessor | ({ item }) => item.value | Very similar to the `yAccessor` of the other charts |\n| outerRadius | \"100%\" | The outer radius, use this to tweak how close your pie is to the edge of it's container. Takes either percentages or absolute numbers (pixels) |\n| innerRadius | \"50%\" | The inner radius, use this to create a donut. Takes either percentages or absolute numbers (pixels) |\n| labelRadius | undefined | The radius of the circle that will help you layout your labels. Takes either percentages or absolute numbers (pixels) |\n| padAngle | |  The angle between the slices |\n| startAngle | 0 | The start angle in radians of the entire pie |\n| endAngle | Math.PI * 2 | The end angle in radians of the entire pie |\n| sort | `(a,b) => b.value - a.value` | Like any normal sort function it expects either 0, a positive or negative return value. The arguments are each an object from the `dataPoints` array |\n\n#### Arguments to children\n\n| Property | Description\n| --- | --- |\n| width | the width of the canvas in pixels\n| height | the height of the canvas in pixels\n| slices | an array of the pie chart slices. See source code and examples for what it includes\n| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point\n\n\n### ProgressCircle\n![Progress circle](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/progress-circle.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { ProgressCircle }  from 'react-native-svg-charts'\n\nclass ProgressCircleExample extends React.PureComponent {\n\n    render() {\n\n        return (\n            <ProgressCircle\n                style={ { height: 200 } }\n                progress={ 0.7 }\n                progressColor={'rgb(134, 65, 244)'}\n            />\n        )\n    }\n\n}\n\n```\n\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| progress | **required** | PropTypes.number.isRequired |\n| progressColor | 'black' | PropTypes.any |\n| backgroundColor | '#ECECEC' |  PropTypes.any |\n| startAngle | `0` | PropTypes.number |\n| endAngle | `Math.PI * 2` |  PropTypes.number |\n| strokeWidth | 5 |  PropTypes.number |\n| cornerRadius | 45 |  PropTypes.number |\n\n\n#### Arguments to children\n\n| Property | Description\n| --- | --- |\n| width | the width of the canvas in pixels |\n| height | the height of the canvas in pixels |\n| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point |\n\n\n#### Arguments to children\n\n| Property | Description\n| --- | --- |\n| width | the width of the canvas in pixels |\n| height | the height of the canvas in pixels |\n| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point |\n\n\n### YAxis\n\n![Y-axis](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/y-axis.png)\n\nA helper component to layout your Y-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the YAxis has the same vertical contentInset.\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { LineChart, YAxis, Grid } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass YAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        const contentInset = { top: 20, bottom: 20 }\n\n        return (\n            <View style={{ height: 200, flexDirection: 'row' }}>\n                <YAxis\n                    data={ data }\n                    contentInset={ contentInset }\n                    svg={{\n                        fill: 'grey',\n                        fontSize: 10,\n                    }}\n                    numberOfTicks={ 10 }\n                    formatLabel={ value => `${value}ºC` }\n                />\n                <LineChart\n                    style={{ flex: 1, marginLeft: 16 }}\n                    data={ data }\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                    contentInset={ contentInset }\n                >\n                    <Grid/>\n                </LineChart>\n            </View>\n        )\n    }\n\n}\n\n```\n\n#### Props\n\n(see [Common Props](#common-props))\n\n| Property | Default | Description |\n| --- | --- | --- |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `yScale`, *or* d3Scale.scaleBand if used in conjunction with a horizontal BarChart |\n| svg | `{}` | supports all svg props an svg text normally supports |\n| spacingInner | 0.05 | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingInner` prop on the actual BarChart |\n| spacingOuter | 0.05 | Spacing outside of the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingOuter` prop on the actual BarChart  |\n| formatLabel | `value => {}` | A utility function to format the text before it is displayed, e.g `value => \"$\" + value |\n| contentInset | { top: 0, bottom: 0 } | Used to sync layout with chart (if same prop used there) |\n| min | undefined | Used to sync layout with chart (if gridMin is used there) |\n| max | undefined | Used to sync layout with chart (if gridMax is used there) |\n\n#### Arguments to children\n\nNo arguments\n\n\n### XAxis\n\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/x-axis.png)\n\nA helper component to layout your X-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the XAxis has the same horizontal contentInset.\n\nThe XAxis also supports the `xAccessor` prop, if it's not supplied it will assume that you're only interested in the index of the data set.\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { LineChart, XAxis, Grid } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass XAxisExample extends React.PureComponent {\n\n    render() {\n\n        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]\n\n        return (\n            <View style={{ height: 200, padding: 20 }}>\n                <LineChart\n                    style={{ flex: 1 }}\n                    data={ data }\n                    gridMin={ 0 }\n                    contentInset={{ top: 10, bottom: 10 }}\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                >\n                    <Grid/>\n                </LineChart>\n                <XAxis\n                    style={{ marginHorizontal: -10 }}\n                    data={ data }\n                    formatLabel={ (value, index) => index }\n                    contentInset={{ left: 10, right: 10 }}\n                    svg={{ fontSize: 10, fill: 'black' }}\n                />\n            </View>\n        )\n    }\n}\n\n```\n\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| data | **required** | An array of values or objects to render on the xAxis. Should preferably have the same length as the chart's dataPoints. If a complex object is used instead of a simple value, a `xAccessor`  prop **is required** to calculate the axis' extent. A data object can contain a `svg` property which allows you to override styles on that specific object  |\n| scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `xScale` |\n| spacingInner | 0.05 | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingInner` prop on the actual BarChart |\n| spacingOuter | 0.05 | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingOuter` prop on the actual BarChart |\n| svg | `{}` | Default svg props **for all labels**. Supports all svg props an svg text normally supports. This styles will be overriden if there are specific styles for a given data object  |\n| formatLabel | `value => value` | A utility function to format the text before it is displayed, e.g `value => \"day\" + value`. Passes back the value provided by the `xAccessor` |\n| contentInset | { left: 0, right: 0 } | Used to sync layout with chart (if same prop used there) |\n\n#### Arguments to children\n\nNo arguments\n\n### Children\n\nNew for version 5.0.\nEach chart (and axes) component now accepts React children. *Important*  note is that all children must be a `react-native-svg` component\non order for it to be rendered by the chart. This API deprecates the old one with `extras` and `decorators`.\nEverything that should be rendered above or below the chart should now be supplied as a child to said chart.\nThis allows you to declare the order in which your decorators should be rendered. If you want anything rendered below the chart,\nsimply add the prop `belowChart={true}`. There's a ton of examples in the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples), go and have a look.\n\n\n### Grid\n\nThis library provides a helper component for drawing grids.\nSimply place it as child to the chart of your choice and (if necessary) set its direction.\n\n#### Props\n\n| Property | Default | Description |\n| --- | --- | --- |\n| svg | `{}` | an object containing  all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props)  |\n| direction | Grid.Direction.HORIZONTAL | The direction of the grid lines.   |\n| belowChart | true | whether or not to render below the chart |\n\n### Examples\nThere is a ton of examples over at [react-native-svg-chart-exampels](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n\n## License\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"8961ad914336d2f649cc9027be81f421f0df2375","_id":"react-native-svg-charts@5.2.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-XE79/GMg95Jhpk2BQlYGweKlnY032LtEbIeKrEE4xo22FZaTKZbJYj87R+vMdGWzlWmzBDfr95+bbkWrJnZtoA==","shasum":"0d87dfd6d6ac8fcf6ef72a17ac640b7b076fdf24","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-5.2.1.tgz","fileCount":42,"unpackedSize":167065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbO08wCRA9TVsSAnZWagAAnpUP/RkEjCbINpLWGLYO24dd\ngshJrd1e+yQjRNzqDT10XjiLXa/PekVl1noza2LUXOL7eOY45zjT4eVWm+3g\nF3nVIStitISyq9mWZenrmB+8WjGDg5ei+zAPwsWccaAq2ehEFHw0yEeoZ2N/\nlxE9q1D6Am3hNeVtBUSSFLCELKOKpqbPUxgdxq968PeS8Je4iNBqmi0br34j\nhBzYXCoF//fC4IwVticEgdPjq8WdxJhsux2S+wsZrGYVmr4eWJfGOvghMkgf\n0/t3hn8YTCVXFtKACEehZCVjA0FbqP5vTSj74WRwlHx3EmAShGI2SlZQii2S\nRzPuMFJDdZ1Xl4S17bIfie9sv9eFR9GpVxO/qFwqJzxhqweOpO+Z2Bi4uBbj\nAqhHeu3AVM/ABhZLWu4MU0CwQRLI5NG52hPrEcDD2Dk6Y3rEo2T7pnurxxud\ncQOU9UqzgIJZm9kJX0krcIgKivBU+mEArelaJh7fdXB5JHrr6MK8lDKEIxvo\nBbmVZbthQmid2CZzGmSNqBPHjhoC36Mt9W/uLTZCjGheFM4p/waCXIReucLk\no/NNotyniHWMyCB93mCql/dHI7mgMORKtfDsR1TUn5bvVbIcavESV9KZQ1c1\nWDqerH6liYvpzGdjexUn2zMgw4ft27LzgjKdhqgTU0pLitzyifuT3PC+1uSi\n4Y9a\r\n=jwG8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD473LnhqjQcGfhgES4KMk9FjHEnG0PZPJk8CGJlw6Q/wIgecRP86ErpfF6/39xMUudvUUEX6TnBDuqaa9/5TimDXo="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_5.2.1_1530613552763_0.5657030470130595"},"_hasShrinkwrap":false},"5.3.0":{"name":"react-native-svg-charts","version":"5.3.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","main":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint ."},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"lint-staged":{"*.js":"eslint"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1||^7.0.3"},"devDependencies":{"@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","date-fns":"^1.28.5","eslint":"^4.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.7.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","husky":"^3.0.0","jest":"20.0.1","lint-staged":"^7.1.3","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native":"0.52.2","react-native-svg":"^6.2.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native"},"gitHead":"f9c3c03e5874c0f7e7818331db6b386e9d4590e6","_id":"react-native-svg-charts@5.3.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"dist":{"integrity":"sha512-XxKDqMdOl8EhQGhLAzWtmfhhiTuPeeRrLvLQ5+BzaRoCgdBO1CGGKeLvEor8OU8QUi3IXSdbbTi+fVrFq5hqaQ==","shasum":"00ce3a043594e3c5e283f7496a44ab455c834a51","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-5.3.0.tgz","fileCount":50,"unpackedSize":170348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdINurCRA9TVsSAnZWagAAEnMQAI9ntSM01sxtjq9kOqYt\nRE5rA5Ja89d671CLBNthvUgUHzglX6pmoxQ8oNg2vwO+6OIIyBqGOGMDw4Aa\ngc3MVngFS2FnK3ufrYfCziLpYbd1x90bfK4JyLzEF0pUZs8EBlTyBq0dDMP1\nGeBE9wWgPWmZ668fY5Ca2AiWuxueugz8krBLb+ySF8njjfIdJHTc+ZZ5BzQ9\nufzyyue4CE0SYlZen2i8BL8rhP74QK4JNtDJFzfPBJr1jaeEpqJxmLBVc4Tu\ngigQfQP/7cJgPPqN6cOrO7mGxXrRlNSR5afojLqQOhP3zCS4bqA2E9zaK6jB\na36jtOqsObjFW6enkMzzf3GSX7qDnEMEBIummmhBSfOTyJDYXPDmPOhwNsFk\nr2sr4hT8Nxo+Xda/Y11cXqCQCnU6lt6k9lUE/tSp27UerrsiXPzN78qNBEib\nC66hu5PmJA5Xj5v2OoHkYzE3iZVWqnlpk8zPkBmL/IvJVvxPxRcQ5zHnguqP\nuvnYkruqb4p0epdknGwH0rGpYMzi6xRw5tRTHcx40eLn8gI4hIWQ5CX+rKeH\nK/WM46OyH2AsrVxdvHVsZprEpIPW1ns7QdETeIE/hFux78IqEKGN93GmXOfB\noKR/DrqAvUejjCU+7gufdMXGa76+NeO4PGMLSjSxY0AEoGIh4uClRN6wwEwL\nz120\r\n=OAp4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDD1X5gHWhtzdx1Nf3kbea5xW2kcFQEocmGVosdGJGVVAIgGXbftTcf/noGeWJue1MgkauI7VPAS1yBPvZRGULLYWk="}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_5.3.0_1562434474960_0.526566457531719"},"_hasShrinkwrap":false},"5.4.0":{"name":"react-native-svg-charts","version":"5.4.0","private":false,"description":"Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native","main":"lib/module/index.js","module":"lib/module/index.js","react-native":"src/index.js","scripts":{"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest","storybook":"storybook start -p 7008","eslint":"eslint .","prepare":"bob build"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"lint-staged":{"*.js":"eslint"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"homepage":"https://github.com/JesperLekland/react-native-svg-charts","bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"},"repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"license":"MIT","dependencies":{"d3-array":"^1.2.0","d3-interpolate-path":"2.0.0","d3-scale":"^1.0.6","d3-shape":"^1.0.6","prop-types":"^15.6.0"},"peerDependencies":{"react":">=16.0.0-alpha.12","react-native":">=0.46.0","react-native-svg":"^6.2.1||^7.0.3"},"devDependencies":{"@react-native-community/bob":"^0.10.0","@storybook/addon-actions":"^3.2.14","@storybook/addon-knobs":"^3.2.14","@storybook/addon-links":"^3.2.14","@storybook/react-native":"^3.2.14","babel-eslint":"^7.2.3","babel-jest":"20.0.1","babel-preset-react-native":"1.9.1","date-fns":"^1.28.5","eslint":"^4.19.0","eslint-config-standard":"^10.2.1","eslint-plugin-import":"^2.6.0","eslint-plugin-node":"^5.1.0","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.7.0","eslint-plugin-react-native":"^2.3.2","eslint-plugin-standard":"^3.0.1","husky":"^3.0.0","jest":"20.0.1","lint-staged":"^7.1.3","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"16.2.0","react-dom":">=16.0.0-alpha.12","react-native":"0.52.2","react-native-svg":"^6.2.1","react-test-renderer":"16.0.0-alpha.6"},"jest":{"preset":"react-native","modulePathIgnorePatterns":["<rootDir>/lib/"]},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module"]},"eslintIgnore":["node_modules/","lib/"],"gitHead":"989e6f18feea2c13d3e9b9226521b3b5f15e2a7b","_id":"react-native-svg-charts@5.4.0","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-5TaIGSihJaHCGFj32Tc07hZrqqTpvdyAx89PIrW2nLf2tijd61+3UE3jtsiHOvfeAyDgSTWjv6s9qG9d2di7Pw==","shasum":"3817a4714c276b7024e60ae5c9f13191614aecc8","tarball":"https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-5.4.0.tgz","fileCount":90,"unpackedSize":417079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelgkqCRA9TVsSAnZWagAABZgQAJPL0PX8i4etFP464pSj\nnIgA4d+W5nYf0iyhWhcE+9g/s7CB8hmZaVgWADUG0Nh7e0Vb58O2AndjX9+l\ni+WryMI8rBsu7R7Qrsv83uHc3YZYBinrjrwBSEb/FyRmxqWHRe35v3Gzx2Dc\nZWUCw0pBBwYJi1c8c89XnqJmuaPAIx+lVzF69C2WmPI01QUCCrJ+/H43M4QM\nigMHMkJRtRxiCZ79Xcw4HoPpWELL0YZFa3KvYfixZrUgR8X2MLCSQDbt1zH3\nF4HZa+Ct9zELQ1Hn8KgrlLxB4AgYwXTFtqprGmHjhhb91yYthAK5FzTvhvgf\n7m4Kpx2ZuM7hvonyHtajSOgBbZmXt/lBC+qU2Yl8ETXDYzfVog8qnim/5Q48\nquYni4RKOf0p7YDtuZZ44OfwFPbUhsiKutBvxrs90FYJEtoMartoKskVGYLB\nv9wMHP6F+MdL5kif/vVIc1M//zqoWGkC5TF1Y9NCTp0T5WZNoTA/S109d/mT\nVU5/H3sAKeLicj3Z/prPJjd/rurEOX7rTE7f3xigsZNbVhomgqVZdVDzLNon\nDy+zuH+SEu0TpDAcrSfNFil2yYe6LFtEMkO9x9r/MxwR9bq5UZ9yTHmphxVY\nh1ldW0hH0Yz51OuQPlRuR6vsuRTUVDijtvt4E7/Vu4r9N1jrDfvkdBjnO3W7\nwDV8\r\n=6fAv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcOI9Pj+iBokCuyWexwQU4SXtLhALq1E9Y2DjOXHwEVQIhAMoV968lAvS0RiW5xRTw7JwIUwcHiDD0ZwQQc3PWCcei"}]},"maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"_npmUser":{"name":"lekland","email":"jesper.lekland@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-charts_5.4.0_1586891049600_0.7390549979510002"},"_hasShrinkwrap":false}},"readme":"# react-native-svg-charts\n\n[![version](https://img.shields.io/npm/v/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n[![downloads](https://img.shields.io/npm/dm/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n[![license](https://img.shields.io/npm/l/react-native-svg-charts.svg)](https://www.npmjs.com/package/react-native-svg-charts)\n\nWelcome to react-native-svg-charts!\n\n`react-native-svg-charts` provides SVG Charts support to React Native on iOS and Android, and a compatibility layer for the web.\n\n### Looking for maintainers! I alone don't have the time to maintain this library anymore. Preferably looking for somebody who uses this library in their proffesional work (how I originally got the time to maintain).\n\n### version 5 is now available!\n\nA much improved decorator system has been introduced, allowing for greater flexibility and less complexity.\nSee [releases](https://github.com/JesperLekland/react-native-svg-charts/releases) for more information.\n\n---\n\nIn order to not bloat this README too much we've moved some examples over to\n[`react-native-svg-charts-examples`](https://github.com/JesperLekland/react-native-svg-charts-examples).\nThere we will try to showcase the really cool things you can do with this library.\nThis README will try to keep things as simple as possible so that everybody can get up and running as fast as possible.\n\n## Prerequisites\n\nThis library uses [react-native-svg](https://github.com/react-native-community/react-native-svg)\nto render its graphs. Therefore this library needs to be installed **AND** linked into your project to work.\n\nOther than the above dependency this library uses pure javascript and supports both iOS and Android\n\n## Getting Started\n\n> Make sure to follow the installation mentioned in the [Prerequisites](#Prerequisites)\n\nThen you can install the library using either yarn:\n\n```\nyarn add react-native-svg-charts\n```\n\nor npm:\n\n```\nnpm install --save react-native-svg-charts\n```\n\nNow you're good to go!\n\n## Motivation\n\nCreating beautiful graphs in React Native shouldn't be hard or require a ton of knowledge.\nWe use [react-native-svg](https://github.com/react-native-community/react-native-svg) in order to render our SVG's and to provide you with great extensibility.\nWe utilize the very popular [d3](https://d3js.org/) library to create our SVG paths and to calculate the coordinates.\n\nWe built this library to be as extensible as possible while still providing you with the most common charts and data visualization tools out of the box.\nWe're very proud of our \"decorator\" support. All charts can be extended with \"decorators\", a component that somehow styles or enhances your chart.\nSimply pass in a `react-native-svg` compliant component as a child to the graph and it will be called with all the necessary information to layout your decorator.\nSee each chart for information on what data the decorator will be called with.\n\nFeedback and PR's are more than welcome 🙂\n\n## Running\n\nIf you want to test out the library you can clone this repository and run it.\nWe suggest that you test out the [storybooks](https://github.com/storybooks/storybook) that we've implemented.\nMost of the charts are implemented with [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs) so that you can tweak most properties and see their behavior live.\n\nClone the repo and run the following:\n\n```bash\nyarn\n\n# for iOS\n(cd ios && pod install)\nreact-native run-ios\n\n# for Android\nreact-native run-android\n\nyarn storybook\n\n# and then reload your device\n```\n\n## Common Props\n\n| Property          | Default                                  | Description                                                                                                                                                                                                                                                    |\n| ----------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| data              | **required**                             | An array of arbitrary data - use prop `xAccessor`/`yAccessor`to tell the chart about the data structure                                                                                                                                                        |\n| yAccessor         | ({ item }) => item                       | A function that takes each entry of `data` (named \"item\") as well as the index and returns the y-value of that entry                                                                                                                                           |\n| xAccessor         | ({ index }) => index                     | Same as `yAccessor` but returns the x-value of that entry                                                                                                                                                                                                      |\n| yScale            | d3Scale.scaleLinear                      | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand )                                                                                                                                                       |\n| xScale            | d3Scale.scaleLinear                      | Same as `yScale` but for the x axis                                                                                                                                                                                                                            |\n| svg               | `{}`                                     | an object containing all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props)                                                   |\n| animate           | false                                    | PropTypes.bool                                                                                                                                                                                                                                                 |\n| animationDuration | 300                                      | PropTypes.number                                                                                                                                                                                                                                               |\n| style             | undefined                                | Supports all [ViewStyleProps](https://facebook.github.io/react-native/docs/view-style-props)                                                                                                                                                            |\n| curve             | d3.curveLinear                           | A function like [this](https://github.com/d3/d3-shape#curves)                                                                                                                                                                                                  |\n| contentInset      | { top: 0, left: 0, right: 0, bottom: 0 } | An object that specifies how much fake \"margin\" to use inside of the SVG canvas. This is particularly helpful on Android where `overflow: \"visible\"` isn't supported and might cause clipping. Note: important to have same contentInset on axis's and chart   |\n| numberOfTicks     | 10                                       | We use [d3-array](https://github.com/d3/d3-array#ticks) to evenly distribute the grid and dataPoints on the yAxis. This prop specifies how many \"ticks\" we should try to render. Note: important that this prop is the same on both the chart and on the yAxis |\n| showGrid          | true                                     | Whether or not to show the grid lines                                                                                                                                                                                                                          |\n| yMin              | undefined                                | Alter how the chart bounds are calculated                                                                                                                                                                                                                      |\n| yMax              | undefined                                | Alter how the chart bounds are calculated                                                                                                                                                                                                                      |\n| xMin              | undefined                                | Alter how the chart bounds are calculated                                                                                                                                                                                                                      |\n| xMax              | undefined                                | Alter how the chart bounds are calculated                                                                                                                                                                                                                      |\n| children          | undefined                                | One or many `react-native-svg` components that will be used to enhance your chart                                                                                                                                                                              |\n\n## Common arguments to children\n\n| Property | Description                                                                                                             |\n| -------- | ----------------------------------------------------------------------------------------------------------------------- |\n| x        | a function that normally accepts the index of a data point an returns its 'x' location on the canvas                    |\n| y        | a function that normally accepts the value of a data point an returns its 'y' location on the canvas                    |\n| width    | the width of the canvas in pixels                                                                                       |\n| height   | the height of the canvas in pixels                                                                                      |\n| data     | the same data array provided to the chart, use this to map over your data points if you want decorators on each point   |\n| ticks    | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids) |\n\n## Components\n\nThis library currently provides the following components\n\n-   [Area](#areachart)\n-   [StackedAreaChart](#stackedareachart)\n-   [Bar](#barchart)\n-   [StackedBarChart](#stackedbarchart)\n-   [Line](#linechart)\n-   [Pie](#piechart)\n-   [ProgressCircle](#progresscircle)\n-   [YAxis](#yaxis)\n-   [XAxis](#xaxis)\n\nAlso see\n\n-   [Children](#children)\n-   [Grid](#grid)\n\n### AreaChart\n\n![Area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-chart.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { AreaChart, Grid } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass AreaChartExample extends React.PureComponent {\n    render() {\n        const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80]\n\n        return (\n            <AreaChart\n                style={{ height: 200 }}\n                data={data}\n                contentInset={{ top: 30, bottom: 30 }}\n                curve={shape.curveNatural}\n                svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}\n            >\n                <Grid />\n            </AreaChart>\n        )\n    }\n}\n```\n\n#### Props\n\nSee [Common Props](#common-props)\n\n| Property | Default | Description                                                                  |\n| -------- | ------- | ---------------------------------------------------------------------------- |\n| start    | 0       | The value of which the area should start (will always end on the data point) |\n\n#### Arguments to children\n\nSupports all [Common arguments to children](#common-arguments-to-children)\n\n### StackedAreaChart\n\nVery similar to an area chart but with multiple sets of data stacked together.\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\nSee [Area stack chart with Y axis](https://github.com/JesperLekland/react-native-svg-charts-examples/blob/master/storybook/stories/area-stack/with-y-axis.js) to see how to use a YAxis with this component\nUse the `svgs` prop to pass in `react-native-svg` compliant props to each area.\n\n![Stacked area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-stack.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { StackedAreaChart } from 'react-native-svg-charts'\nimport * as shape from 'd3-shape'\n\nclass StackedAreaExample extends React.PureComponent {\n    render() {\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = ['#8800cc', '#aa00ff', '#cc66ff', '#eeccff']\n        const keys = ['apples', 'bananas', 'cherries', 'dates']\n        const svgs = [\n            { onPress: () => console.log('apples') },\n            { onPress: () => console.log('bananas') },\n            { onPress: () => console.log('cherries') },\n            { onPress: () => console.log('dates') },\n        ]\n\n        return (\n            <StackedAreaChart\n                style={{ height: 200, paddingVertical: 16 }}\n                data={data}\n                keys={keys}\n                colors={colors}\n                curve={shape.curveNatural}\n                showGrid={false}\n                svgs={svgs}\n            />\n        )\n    }\n}\n```\n\n#### Props\n\n| Property | Default                                                              | Description                                                               |\n| -------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| data     | **required**                                                         | An array of the data entries                                              |\n| keys     | **required**                                                         | This array should contain the object keys of interest (see above example) |\n| colors   | **required**                                                         | An array of equal size as `keys` with the color for each key              |\n| order    | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone)   | The order in which to sort the areas                                      |\n| offset   | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas                           |\n\nAlso see [Common Props](#common-props)\n\n#### Arguments to children\n\n| Property | Description                                                                                                              |\n| -------- | ------------------------------------------------------------------------------------------------------------------------ |\n| x        | a function that normally accepts the index of a data points an returns its 'x' location on the canvas                    |\n| y        | a function that normally accepts the value of a data points an returns its 'y' location on the canvas                    |\n| width    | the width of the canvas in pixels                                                                                        |\n| height   | the height of the canvas in pixels                                                                                       |\n| ~~data~~ | ~~the same data array provided to the chart, use this to map over your data points if you want decorators on each point~ |\n| ticks    | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids)  |\n\nThis chart does not call a child with the `data` argument. This is due to the fact that a lot of calculations go into\ncreating the stacked chart, meaning that the original `data` prop doesn't provide especially valuable information\nwhen trying to layout decorators. It does however call with the rest of the [common arguments](#common-arguments-to-children)\n\n### BarChart\n\n![Bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-chart.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { BarChart, Grid } from 'react-native-svg-charts'\n\nclass BarChartExample extends React.PureComponent {\n    render() {\n        const fill = 'rgb(134, 65, 244)'\n        const data = [50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80]\n\n        return (\n            <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>\n                <Grid />\n            </BarChart>\n        )\n    }\n}\n```\n\n### Props\n\nAlso see [Common Props](#common-props)\n\n| Property     | Default                                    | Description                                                                                                                                                                                                                                                                                                                                                                             |\n| ------------ | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| data         | **required**                               | The data prop in a barChart can look exactly like in a Line- or AreaChart, i.e an array of just numbers or complex objects. It can however also be an array with several data sets. A data object can contain a `svg` property which allows you two override styles on that specific object. See [the examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) |\n| horizontal   | false                                      | Boolean whether or not the bars should be horizontal                                                                                                                                                                                                                                                                                                                                    |\n| svg          | `{}`                                       | Default svg props **for all bars**. Supports all svg props an svg path normally supports. This styles will be overriden if there are specific styles for a given data object                                                                                                                                                                                                            |\n| spacingInner | 0.05                                       | Spacing between the bars (or groups of bars)                                                                                                                                                                                                                                                                                                                                            |\n| spacingOuter | 0.05                                       | Spacing outside of the bars (or groups of bars). Percentage of one bars width                                                                                                                                                                                                                                                                                                           |\n| contentInset | `{ top: 0, left: 0, right: 0, bottom: 0 }` | PropTypes.shape                                                                                                                                                                                                                                                                                                                                                                         |\n\n#### Arguments to children\n\n| Property  | Description                     |\n| --------- | ------------------------------- |\n| bandwidth | the width of a band (a.k.a bar) |\n\nAlso supports all [Common arguments to children](#common-arguments-to-children)\n\n### StackedBarChart\n\nThe same as the [StackedAreaChart](#stackedareachart) except with bars (and different `svgs` prop).\nWe suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props\n\nThe `svgs` prop here is not based on keys, but rather entries, as the user might want to specify different props\nfor each entry in each bar. Therefore each key entry can contain a complex object that contains e.g an `svg` prop. See [this example](./storybook/stories/bar-stack/with-on-press.js) for inspiration\n\n![Stacked bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack.png)\n![Stacked bar chart - horizontal](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack-horizontal.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { StackedBarChart } from 'react-native-svg-charts'\n\nclass StackedBarChartExample extends React.PureComponent {\n    render() {\n        const data = [\n            {\n                month: new Date(2015, 0, 1),\n                apples: 3840,\n                bananas: 1920,\n                cherries: 960,\n                dates: 400,\n                oranges: 400,\n            },\n            {\n                month: new Date(2015, 1, 1),\n                apples: 1600,\n                bananas: 1440,\n                cherries: 960,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 2, 1),\n                apples: 640,\n                bananas: 960,\n                cherries: 3640,\n                dates: 400,\n            },\n            {\n                month: new Date(2015, 3, 1),\n                apples: 3320,\n                bananas: 480,\n                cherries: 640,\n                dates: 400,\n            },\n        ]\n\n        const colors = ['#7b4173', '#a55194', '#ce6dbd', '#de9ed6']\n        const keys = ['apples', 'bananas', 'cherries', 'dates']\n\n        return (\n            <StackedBarChart\n                style={{ height: 200 }}\n                keys={keys}\n                colors={colors}\n                data={data}\n                showGrid={false}\n                contentInset={{ top: 30, bottom: 30 }}\n            />\n        )\n    }\n}\n```\n\n#### Props\n\n| Property      | Default                                                              | Description                                                                                                      |\n| ------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| data          | **required**                                                         | An array of the data entries: each value can be a number or a complex object with custom `svg` props for example |\n| keys          | **required**                                                         | This array should contain the object keys of interest (see above example)                                        |\n| colors        | **required**                                                         | An array of equal size as `keys` with the color for each key                                                     |\n| valueAccessor | ({ item, key }) => item[key]                                         | Very similar to the `yAccessor` of the other charts, usually needed when using complex objects as values         |\n| horizontal    | false                                                                | Boolean whether or not the bars should be horizontal                                                             |\n| order         | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone)   | The order in which to sort the areas                                                                             |\n| offset        | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas                                                                  |\n\nAlso see [Common Props](#common-props)\n\n#### Arguments to children\n\n| Property | Description                                                                                                               |\n| -------- | ------------------------------------------------------------------------------------------------------------------------- |\n| x        | a function that normally accepts the index of a data points an returns its 'x' location on the canvas                     |\n| y        | a function that normally accepts the value of a data points an returns its 'y' location on the canvas                     |\n| width    | the width of the canvas in pixels                                                                                         |\n| height   | the height of the canvas in pixels                                                                                        |\n| ~~data~~ | ~~the same data array provided to the chart, use this to map over your data points if you want decorators on each point~~ |\n| ticks    | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids)   |\n\nThis chart does not call a child with the `data` argument. This is due to the fact that a lot of calculations go into\ncreating the stacked chart, meaning that the original `data` prop doesn't provide especially valuable information\nwhen trying to layout decorators. It does however call with the rest of the [common arguments](#common-arguments-to-children)\n\n### LineChart\n\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/line-chart.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { LineChart, Grid } from 'react-native-svg-charts'\n\nclass LineChartExample extends React.PureComponent {\n    render() {\n        const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80]\n\n        return (\n            <LineChart\n                style={{ height: 200 }}\n                data={data}\n                svg={{ stroke: 'rgb(134, 65, 244)' }}\n                contentInset={{ top: 20, bottom: 20 }}\n            >\n                <Grid />\n            </LineChart>\n        )\n    }\n}\n```\n\n#### Props\n\nSee [Common Props](#common-props)\n\n#### Arguments to children\n\nSupports all [Common arguments to children](#common-arguments-to-children)\n\n### PieChart\n\nThe PieChart is a really nice component with great support for custom behavior.\nSee more examples in the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n![Pie chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/pie-chart.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { PieChart } from 'react-native-svg-charts'\n\nclass PieChartExample extends React.PureComponent {\n    render() {\n        const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80]\n\n        const randomColor = () => ('#' + ((Math.random() * 0xffffff) << 0).toString(16) + '000000').slice(0, 7)\n\n        const pieData = data\n            .filter((value) => value > 0)\n            .map((value, index) => ({\n                value,\n                svg: {\n                    fill: randomColor(),\n                    onPress: () => console.log('press', index),\n                },\n                key: `pie-${index}`,\n            }))\n\n        return <PieChart style={{ height: 200 }} data={pieData} />\n    }\n}\n```\n\n#### Props\n\n| Property      | Default                      | Description                                                                                                                                                                                                                                                                                                                                 |\n| ------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| data          | **required**                 | Very similar to the data prop of our other charts, the only exception is that the PieChart only accepts complex objects (not just numbers). An item can also contain the `arc` property which allows you two override settings on that specific arc. See [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) |\n| valueAccessor | ({ item }) => item.value     | Very similar to the `yAccessor` of the other charts                                                                                                                                                                                                                                                                                         |\n| outerRadius   | \"100%\"                       | The outer radius, use this to tweak how close your pie is to the edge of it's container. Takes either percentages or absolute numbers (pixels)                                                                                                                                                                                              |\n| innerRadius   | \"50%\"                        | The inner radius, use this to create a donut. Takes either percentages or absolute numbers (pixels)                                                                                                                                                                                                                                         |\n| labelRadius   | undefined                    | The radius of the circle that will help you layout your labels. Takes either percentages or absolute numbers (pixels)                                                                                                                                                                                                                       |\n| padAngle      |                              | The angle between the slices                                                                                                                                                                                                                                                                                                                |\n| startAngle    | 0                            | The start angle in radians of the entire pie                                                                                                                                                                                                                                                                                                |\n| endAngle      | Math.PI \\* 2                 | The end angle in radians of the entire pie                                                                                                                                                                                                                                                                                                  |\n| sort          | `(a,b) => b.value - a.value` | Like any normal sort function it expects either 0, a positive or negative return value. The arguments are each an object from the `dataPoints` array                                                                                                                                                                                        |\n\n#### Arguments to children\n\n| Property | Description                                                                                                           |\n| -------- | --------------------------------------------------------------------------------------------------------------------- |\n| width    | the width of the canvas in pixels                                                                                     |\n| height   | the height of the canvas in pixels                                                                                    |\n| slices   | an array of the pie chart slices. See source code and examples for what it includes                                   |\n| data     | the same data array provided to the chart, use this to map over your data points if you want decorators on each point |\n\n### ProgressCircle\n\n![Progress circle](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/progress-circle.png)\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { ProgressCircle } from 'react-native-svg-charts'\n\nclass ProgressCircleExample extends React.PureComponent {\n    render() {\n        return <ProgressCircle style={{ height: 200 }} progress={0.7} progressColor={'rgb(134, 65, 244)'} />\n    }\n}\n```\n\n#### Props\n\n| Property        | Default       | Description                 |\n| --------------- | ------------- | --------------------------- |\n| progress        | **required**  | PropTypes.number.isRequired |\n| progressColor   | 'black'       | PropTypes.any               |\n| backgroundColor | '#ECECEC'     | PropTypes.any               |\n| startAngle      | `0`           | PropTypes.number            |\n| endAngle        | `Math.PI * 2` | PropTypes.number            |\n| strokeWidth     | 5             | PropTypes.number            |\n| cornerRadius    | 45            | PropTypes.number            |\n\n#### Arguments to children\n\n| Property | Description                                                                                                           |\n| -------- | --------------------------------------------------------------------------------------------------------------------- |\n| width    | the width of the canvas in pixels                                                                                     |\n| height   | the height of the canvas in pixels                                                                                    |\n| data     | the same data array provided to the chart, use this to map over your data points if you want decorators on each point |\n\n### YAxis\n\n![Y-axis](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/y-axis.png)\n\nA helper component to layout your Y-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the YAxis has the same vertical contentInset.\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { LineChart, YAxis, Grid } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass YAxisExample extends React.PureComponent {\n    render() {\n        const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80]\n\n        const contentInset = { top: 20, bottom: 20 }\n\n        return (\n            <View style={{ height: 200, flexDirection: 'row' }}>\n                <YAxis\n                    data={data}\n                    contentInset={contentInset}\n                    svg={{\n                        fill: 'grey',\n                        fontSize: 10,\n                    }}\n                    numberOfTicks={10}\n                    formatLabel={(value) => `${value}ºC`}\n                />\n                <LineChart\n                    style={{ flex: 1, marginLeft: 16 }}\n                    data={data}\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                    contentInset={contentInset}\n                >\n                    <Grid />\n                </LineChart>\n            </View>\n        )\n    }\n}\n```\n\n#### Props\n\n(see [Common Props](#common-props))\n\n| Property     | Default               | Description                                                                                                                                        |\n| ------------ | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| scale        | `d3Scale.scaleLinear` | Should be the same as passed into the charts `yScale`, _or_ d3Scale.scaleBand if used in conjunction with a horizontal BarChart                    |\n| svg          | `{}`                  | supports all svg props an svg text normally supports                                                                                               |\n| spacingInner | 0.05                  | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingInner` prop on the actual BarChart    |\n| spacingOuter | 0.05                  | Spacing outside of the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingOuter` prop on the actual BarChart |\n| formatLabel  | `value => {}`         | A utility function to format the text before it is displayed, e.g `value => \"\\$\" + value                                                           |\n| contentInset | { top: 0, bottom: 0 } | Used to sync layout with chart (if same prop used there)                                                                                           |\n| min          | undefined             | Used to sync layout with chart (if gridMin is used there)                                                                                          |\n| max          | undefined             | Used to sync layout with chart (if gridMax is used there)                                                                                          |\n\n#### Arguments to children\n\nNo arguments\n\n### XAxis\n\n![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/x-axis.png)\n\nA helper component to layout your X-axis labels on the same coordinates as your chart.\nIt's very important that the component has the exact same view bounds (preferably wrapped in the same parent view) as the chart it's supposed to match.\nIf the chart has property `contentInset` set it's very important that the XAxis has the same horizontal contentInset.\n\nThe XAxis also supports the `xAccessor` prop, if it's not supplied it will assume that you're only interested in the index of the data set.\n\n#### Example\n\n```jsx\nimport React from 'react'\nimport { LineChart, XAxis, Grid } from 'react-native-svg-charts'\nimport { View } from 'react-native'\n\nclass XAxisExample extends React.PureComponent {\n    render() {\n        const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80]\n\n        return (\n            <View style={{ height: 200, padding: 20 }}>\n                <LineChart\n                    style={{ flex: 1 }}\n                    data={data}\n                    gridMin={0}\n                    contentInset={{ top: 10, bottom: 10 }}\n                    svg={{ stroke: 'rgb(134, 65, 244)' }}\n                >\n                    <Grid />\n                </LineChart>\n                <XAxis\n                    style={{ marginHorizontal: -10 }}\n                    data={data}\n                    formatLabel={(value, index) => index}\n                    contentInset={{ left: 10, right: 10 }}\n                    svg={{ fontSize: 10, fill: 'black' }}\n                />\n            </View>\n        )\n    }\n}\n```\n\n#### Props\n\n| Property     | Default               | Description                                                                                                                                                                                                                                                                                                                                             |\n| ------------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| data         | **required**          | An array of values or objects to render on the xAxis. Should preferably have the same length as the chart's dataPoints. If a complex object is used instead of a simple value, a `xAccessor` prop **is required** to calculate the axis' extent. A data object can contain a `svg` property which allows you to override styles on that specific object |\n| scale        | `d3Scale.scaleLinear` | Should be the same as passed into the charts `xScale`                                                                                                                                                                                                                                                                                                   |\n| spacingInner | 0.05                  | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingInner` prop on the actual BarChart                                                                                                                                                                                                         |\n| spacingOuter | 0.05                  | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingOuter` prop on the actual BarChart                                                                                                                                                                                                         |\n| svg          | `{}`                  | Default svg props **for all labels**. Supports all svg props an svg text normally supports. This styles will be overriden if there are specific styles for a given data object                                                                                                                                                                          |\n| formatLabel  | `value => value`      | A utility function to format the text before it is displayed, e.g `value => \"day\" + value`. Passes back the value provided by the `xAccessor`                                                                                                                                                                                                           |\n| contentInset | { left: 0, right: 0 } | Used to sync layout with chart (if same prop used there)                                                                                                                                                                                                                                                                                                |\n\n#### Arguments to children\n\nNo arguments\n\n### Children\n\nNew for version 5.0.\nEach chart (and axes) component now accepts React children. _Important_ note is that all children must be a `react-native-svg` component\non order for it to be rendered by the chart. This API deprecates the old one with `extras` and `decorators`.\nEverything that should be rendered above or below the chart should now be supplied as a child to said chart.\nThis allows you to declare the order in which your decorators should be rendered. If you want anything rendered below the chart,\nsimply add the prop `belowChart={true}`. There's a ton of examples in the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples), go and have a look.\n\n### Grid\n\nThis library provides a helper component for drawing grids.\nSimply place it as child to the chart of your choice and (if necessary) set its direction.\n\n#### Props\n\n| Property   | Default                   | Description                                                                                                                                                                                                  |\n| ---------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| svg        | `{}`                      | an object containing all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props) |\n| direction  | Grid.Direction.HORIZONTAL | The direction of the grid lines.                                                                                                                                                                             |\n| belowChart | true                      | whether or not to render below the chart                                                                                                                                                                     |\n\n### Examples\n\nThere are tons of examples over at [react-native-svg-chart-examples](https://github.com/JesperLekland/react-native-svg-charts-examples)\n\n## License\n\n[MIT](./LICENSE)\n","maintainers":[{"name":"lekland","email":"jesper.lekland@gmail.com"}],"time":{"modified":"2022-05-14T22:26:07.932Z","created":"2017-10-30T09:47:51.580Z","1.0.0":"2017-10-30T09:47:51.580Z","1.1.0":"2017-10-31T14:58:53.048Z","1.1.1":"2017-10-31T15:15:00.193Z","1.1.2":"2017-10-31T15:25:45.317Z","1.1.3":"2017-11-06T16:55:39.099Z","1.1.4":"2017-11-07T08:30:51.559Z","1.1.5":"2017-11-07T08:39:00.899Z","1.1.6":"2017-11-07T11:06:15.412Z","1.2.0":"2017-11-14T13:04:57.834Z","1.3.0":"2017-11-14T16:04:32.530Z","1.3.1":"2017-11-14T16:14:09.131Z","1.3.2":"2017-11-20T08:10:45.325Z","1.4.0":"2017-11-20T09:44:21.568Z","1.4.1":"2017-11-21T13:51:48.582Z","1.4.2":"2017-11-28T11:35:00.794Z","1.5.0":"2017-11-28T13:36:00.129Z","1.5.1":"2017-11-28T13:53:19.898Z","1.6.0":"2017-11-28T14:11:57.858Z","1.6.1":"2017-12-04T17:19:17.236Z","2.0.0-rc":"2017-12-08T12:12:50.123Z","2.0.0":"2017-12-08T12:15:59.223Z","1.6.2":"2017-12-10T14:55:26.269Z","2.0.1":"2017-12-10T16:17:00.760Z","2.0.2":"2018-01-14T15:16:35.308Z","2.1.0":"2018-01-14T17:49:30.647Z","2.2.0":"2018-01-24T11:02:24.532Z","2.2.1":"2018-01-24T11:41:42.921Z","2.2.2":"2018-02-01T09:03:09.339Z","3.0.0":"2018-02-04T17:45:57.784Z","2.2.3":"2018-02-07T16:44:33.166Z","3.0.1":"2018-02-18T20:26:39.096Z","3.0.1-test":"2018-02-25T13:30:07.719Z","3.0.2-test":"2018-02-25T13:36:27.475Z","3.0.2":"2018-02-25T15:35:03.598Z","4.0.0-beta":"2018-03-04T15:26:34.219Z","4.0.0-beta-2":"2018-03-04T17:18:06.308Z","4.0.0":"2018-03-04T17:51:38.005Z","4.0.1":"2018-03-08T09:52:43.183Z","4.1.0":"2018-03-11T17:13:42.031Z","4.2.0":"2018-03-18T18:32:17.696Z","5.0.0-RC":"2018-04-15T13:37:44.444Z","5.0.0-RC1":"2018-04-15T14:13:14.158Z","5.0.0":"2018-04-15T14:43:51.282Z","5.1.0":"2018-06-03T12:10:29.583Z","5.1.1":"2018-06-03T12:23:41.906Z","5.2.0":"2018-06-10T18:12:54.657Z","5.2.1":"2018-07-03T10:25:52.895Z","5.3.0":"2019-07-06T17:34:35.097Z","5.4.0":"2020-04-14T19:04:09.736Z"},"keywords":["react-native","react-component","react-native-component","react","mobile","ios","android","vector","charts","chart","d3"],"author":{"name":"Jesper Lekland","email":"jesper.lekland@push2prod.se"},"license":"MIT","readmeFilename":"README.md","homepage":"https://github.com/JesperLekland/react-native-svg-charts","repository":{"type":"git","url":"git://github.com/JesperLekland/react-native-svg-charts.git"},"bugs":{"url":"https://github.com/JesperLekland/react-native-svg-charts/issues"}}