{"_id":"angular-highcharts-chart","_rev":"6-564bd04909bdcb8b52d8aa03ad03164f","name":"angular-highcharts-chart","dist-tags":{"latest":"1.0.2"},"versions":{"0.0.1":{"name":"angular-highcharts-chart","version":"0.0.1","peerDependencies":{"@angular/common":"^6.0.0-rc.0 || ^6.0.0","@angular/core":"^6.0.0-rc.0 || ^6.0.0"},"main":"bundles/angular-highcharts-chart.umd.js","module":"fesm5/angular-highcharts-chart.js","es2015":"fesm2015/angular-highcharts-chart.js","esm5":"esm5/angular-highcharts-chart.js","esm2015":"esm2015/angular-highcharts-chart.js","fesm5":"fesm5/angular-highcharts-chart.js","fesm2015":"fesm2015/angular-highcharts-chart.js","typings":"angular-highcharts-chart.d.ts","metadata":"angular-highcharts-chart.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.9.0"},"_id":"angular-highcharts-chart@0.0.1","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"mkdudeja","email":"87manishkumar@gmail.com"},"dist":{"integrity":"sha512-SNiiUex7dOiRJ5pp/c7MoE1ktiRCLsKEVyyrOZ50+bjvdlcV7eDhTzXGaQ7ckvdpfSOjT38tetLUG0hZ0QDo4Q==","shasum":"2eece1bdb276b2124ada19faeb6bd616520f5e09","tarball":"https://registry.npmjs.org/angular-highcharts-chart/-/angular-highcharts-chart-0.0.1.tgz","fileCount":25,"unpackedSize":67599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbHm8XCRA9TVsSAnZWagAAnfAP/AgpKdLMlZJhLKqkkeHC\nECF4ZyOhR+PT+OOUXY9WCmKZ68qSUn9nwHrFOZJffS5Eq6kCsuxv/G9kP1p/\ndv4QcM1WdSijcCP0vzUS4fI4r7dm3SEr5G5pZigzIqNgn+/QKT8INnCaY4UQ\n6lSY22DbYBJ8EDJUhEVIzYqmg2t6jZ60xrIVqhsqKCMuN7KZmqv7xXlngpy7\nYUTLIijFkysj0OkKIK4iQ7EAap3DugzVIGnSk+gpYxGusHh/TcNWdGuznDi1\nJ+nCJYCFHc8IpMEV+NntHkGABM51Gh5ANF7GHnt71DsAdIZWOnF+3YYRtRnF\nZe7Fd20OWrS2zj7P5M/xFicT1f7SrrLQ1ZQ7zXM13AqmtolXwGb0qbkAjbKk\nJI8q7Ne8uPENnICasvlF7jYGY/vt75ZWz3DeF9i3YAI9HeFj6smD8QqPwxc/\nsXXJs+pbXgjXptR8JCNf8oJ6JrN06QK8xaFKDFmYvOWAE+xZrGAVtThTeHWG\ntEg2djP4ZEf3rNCqcetZecDppep8apDQWjkzj/mGl9pwOZdv0Qv/SUnNsaQp\nfmfpjtPuz4mA24gHy7yJtq0OeEvrmJ1CRsWWrJrQVJDBvBrN70PEAbuhQjrp\nFStFfFtJZQqVRh+y32r3SkZENsSAjcRlIuTL7IBmXMhC5yIR+mngN2liZv3+\noP9T\r\n=+Lvy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZye1X7gwnfEf/uO4vkA1o/CDKBbt7SiLpm5PkSQCN6AiEAlWjrTJCtEYZM6dp9yQPs7eBJQYkHp6r/fvF1VMh69HE="}]},"maintainers":[{"name":"mkdudeja","email":"87manishkumar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/angular-highcharts-chart_0.0.1_1528721174724_0.7836511086442073"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.2":{"name":"angular-highcharts-chart","version":"0.0.2","peerDependencies":{"@angular/common":"^6.0.0-rc.0 || ^6.0.0","@angular/core":"^6.0.0-rc.0 || ^6.0.0","highcharts":"^6.0.0 || ^6.1.0"},"main":"bundles/angular-highcharts-chart.umd.js","module":"fesm5/angular-highcharts-chart.js","es2015":"fesm2015/angular-highcharts-chart.js","esm5":"esm5/angular-highcharts-chart.js","esm2015":"esm2015/angular-highcharts-chart.js","fesm5":"fesm5/angular-highcharts-chart.js","fesm2015":"fesm2015/angular-highcharts-chart.js","typings":"angular-highcharts-chart.d.ts","metadata":"angular-highcharts-chart.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.9.0"},"_id":"angular-highcharts-chart@0.0.2","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"mkdudeja","email":"87manishkumar@gmail.com"},"dist":{"integrity":"sha512-ursX/zIGQscXPRVHx+ZhuqGMdG192D1GyS8/Q6DPSMJHphcHIKwrTxD8ClsLP08NCeeI8x7mmCQ4YRJ8hvnLOw==","shasum":"884b11b599aedaf7eb37c8d4ef24ee2449ebd321","tarball":"https://registry.npmjs.org/angular-highcharts-chart/-/angular-highcharts-chart-0.0.2.tgz","fileCount":25,"unpackedSize":67637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbHnEwCRA9TVsSAnZWagAAw3EQAJMt0xncwtDTtzbs88Pi\nCbNl8gBSkh3JPcuEOGCLhLlGksLkKcokmCxy87k+U2M2obvBEwXfqGdWeOwS\nX4IC9z8qQCzw3IuvddgyjvasWhsAZF0econNjebYzyo4AA1/OVg9ptZuyDPf\nXV1gDa4eruM2TTJne+MYMlRK46a4+cRoUaKq6g9C12osgUOlRXIXsFdhDUS4\n86KQxi5DBWIKsrByREiZrTHGiOBeTsK6+Dhibpvg9DGyUjI3OMJ7B+BFvLec\nwTKVENVO2SCWvL5YG7/Xv91umYYGPLn5W2/61KE5HQQtbAG5XfkiheDCAlrx\nny6tMPOL42S9d4+rTAVIXzVUwVuZ7S5hD+fcE6b2Ovn9pK8c23ABlG+J7DYa\n6seNHQzDdSkXJUOKopPrs8c3aVlAJZQMdh/Bybz46y1RcCeEVuuGq5j3ZCJt\nV4SGDWPz2UdlxlylZAP/8x3LYej+puxu8lqvVNSPxHGUWBOUn3FS95zQlECH\nRa9o2I5b+qKENLDv5SNEhkQMN3vtK/LMi2mMG4arUXAwyffJhJEFaSFvAy2b\n/fj1bSvJ2e4LzMNu7y5g1pLWAyfIRs5Lv8hvS7J4qERCTgB0MFzLzSuYFKaO\noHJ3p0cq0InQVkHRYVIPiWmga1Elsh0MRvrYFoUHa/H17aV3oMEt3dzkbLck\nJ7bq\r\n=S9Kw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDF6dcU9T+EYTRDeTySLsjktB5EHy7Dj/ZdQoQOqSQDtAIgR6KCTU5hDvsLClK4wAT28doOFEZfsdBzwM/5dH2PFxs="}]},"maintainers":[{"name":"mkdudeja","email":"87manishkumar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/angular-highcharts-chart_0.0.2_1528721712069_0.6285630926043158"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.0":{"name":"angular-highcharts-chart","version":"1.0.0","description":"Minimal Highcharts wrapper for Angular (AOT Build and Angular 6 Compatible)","peerDependencies":{"@angular/common":"^6.0.0-rc.0 || ^6.0.0","@angular/core":"^6.0.0-rc.0 || ^6.0.0","highcharts":"^6.0.0 || ^6.1.0"},"repository":{"type":"git","url":"git+https://github.com/mkdudeja/angular-highcharts-chart.git"},"keywords":["Angular","Angular 6","Angular AOT","Highcharts"],"author":{"name":"mkdudeja"},"license":"ISC","bugs":{"url":"https://github.com/mkdudeja/angular-highcharts-chart/issues"},"homepage":"https://github.com/mkdudeja/angular-highcharts-chart#readme","main":"bundles/angular-highcharts-chart.umd.js","module":"fesm5/angular-highcharts-chart.js","es2015":"fesm2015/angular-highcharts-chart.js","esm5":"esm5/angular-highcharts-chart.js","esm2015":"esm2015/angular-highcharts-chart.js","fesm5":"fesm5/angular-highcharts-chart.js","fesm2015":"fesm2015/angular-highcharts-chart.js","typings":"angular-highcharts-chart.d.ts","metadata":"angular-highcharts-chart.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.9.0"},"_id":"angular-highcharts-chart@1.0.0","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"mkdudeja","email":"87manishkumar@gmail.com"},"dist":{"integrity":"sha512-gJ1htcA1yXcvhGEKYPhtOikvmYt71Tvdo5AXxjP7mTFNqU6zIOlsUPF52bZAAkQwak6M5inOFrXrv4zAZuBg2g==","shasum":"18ceb32075be8439fd6538323cff20525312770f","tarball":"https://registry.npmjs.org/angular-highcharts-chart/-/angular-highcharts-chart-1.0.0.tgz","fileCount":23,"unpackedSize":72682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbH7JACRA9TVsSAnZWagAAAWoP/A9YZzYgMrLjN9uli0Wa\nNyGvj5E/VzPU5Q7H6p32odkmniStJSGy0+rQkcHlzYzBEap13dj+nALWLsG3\nJO3d4pkGew4O1tmqpFWylkHQH/NjcQhn766+0U5f36jyJtr4hWfartl9Vgfh\nL4MfSCaZFoHD+fZiLF72FylzkEdPyCyO0x7y8XkitqICinYJERAiu6WaWr7y\nwk/kd02OfqQeyBK7YYLaT6aJQRrkBE8KSnz0OhrbYAvGU2Y99aQbtccvNhQl\nbjLEkrxCWOZ0tOuCFpaLtXWMoqj/xHpKWbzXazX5aL9lJLdfVwB4htntufHU\niSwKUBiw+UvChvp0AzfcmcvAPN+nreEi7l3GWLeEDuDyrXWdRIUn8FG+xm8Z\nyO/MozUYNXaArhlHhLli3gTJlDuj6GGWp2CwGLg5SShRZfeYEbsGt0BLXvwJ\nluQTPcgVQjau9W8J3cVnxa28WXHGVgeNi02soKFsjuG4a90hAwT86MHNrLTg\nKgsFtzzuoTIHZIV/CqmarvEvIod52RRgQ5FTzW31El94pUK5150WVj10SVBX\notvLz6norXp9HG7C33PShZ8Ghq+q+y8zKJpIvUACQ8n2vX1wkfOHVpsYw8dl\neNZWXmHTXKn8OVGOM6vD7biKtlbs5zrEZ//QAwNgulKF36x44+xnJuy+e1dX\nY5cS\r\n=jien\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoNUudCEW50zTh82IL0vh/3F9pcdseerJ5R4+gbx0spwIgCqX3FmvmfD52EZ4YF0SEUWfJpJtDPMiji2GUpqfGqLY="}]},"maintainers":[{"name":"mkdudeja","email":"87manishkumar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/angular-highcharts-chart_1.0.0_1528803902789_0.6609341289453321"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.1":{"name":"angular-highcharts-chart","version":"1.0.1","description":"Minimal Highcharts wrapper for Angular (AOT Build and Angular 6 Compatible)","peerDependencies":{"@angular/common":"^6.0.0-rc.0 || ^6.0.0","@angular/core":"^6.0.0-rc.0 || ^6.0.0","highcharts":"^6.0.0 || ^6.1.0"},"repository":{"type":"git","url":"git+https://github.com/mkdudeja/angular-highcharts-chart.git"},"keywords":["Angular","Angular 6","Angular AOT","Highcharts"],"author":{"name":"mkdudeja"},"license":"ISC","bugs":{"url":"https://github.com/mkdudeja/angular-highcharts-chart/issues"},"homepage":"https://github.com/mkdudeja/angular-highcharts-chart#readme","main":"bundles/angular-highcharts-chart.umd.js","module":"fesm5/angular-highcharts-chart.js","es2015":"fesm2015/angular-highcharts-chart.js","esm5":"esm5/angular-highcharts-chart.js","esm2015":"esm2015/angular-highcharts-chart.js","fesm5":"fesm5/angular-highcharts-chart.js","fesm2015":"fesm2015/angular-highcharts-chart.js","typings":"angular-highcharts-chart.d.ts","metadata":"angular-highcharts-chart.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.9.0"},"_id":"angular-highcharts-chart@1.0.1","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"mkdudeja","email":"87manishkumar@gmail.com"},"dist":{"integrity":"sha512-jlOKwqnZzT5boNnnysj6y4wJzm24WM0lqINYOiEJJFiSdKmWtFxRJYnOXTZ5U/nAP7ZGVs5dZGegSeuGZELASQ==","shasum":"c39984f1f8b05f14e70d1832ba08caf5b56c662e","tarball":"https://registry.npmjs.org/angular-highcharts-chart/-/angular-highcharts-chart-1.0.1.tgz","fileCount":23,"unpackedSize":72682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbH7jTCRA9TVsSAnZWagAA/ZgP/AsrX2FQ0m2pUFu9GJLV\nV8SXgSDVppkup/o4mnIGRmjXjvsJUGfwS9cUZmyn9o7Txg+kagTKwfB2SkHX\nfewqd0cydPAalexrJuxq1yEL+uuRx7BjeSdft9iWbeQaa0r9VrfkpBoyihae\n1p/bhFo8WePcOHmtBP0TTsZEpujkKK1KHTF7lxF0netfCpc13jv/MfGItKrX\nkeU3nS2+7RDgGMFieh8ZRUjrb+5hDCm0UpMs9K9p55WtF1Lx1AHjvwQn+dKq\n/3mMt4GRzONcgSXeQzGlZ5651ZaIRFKMBYHTG20tVN23oOflyXk4SaLBtl/H\nSdxIDIvjtsLabaie6v+jYUNwX84vStOBTydZlN82CdBQn1uL5BxQK9jDbwxN\naY7DBpFt1HiD1xQYaenXOPq+EI/e1SKjZDVxsRHquObsXVoH/mH11fWs8Pbe\nP3Agd6QmroJ3x/A8y9x95JuhJ+eR0f1wAlnb9xMAIz61pZjEqd+gJCBRf5Fp\nv7esfYSr644AE00ePup+MglExo2DlJk7QFxBglID4Hh8JP5N5+bMK93wZ7fs\nF+FpLfgrLJNC9YVlRLGbwld1alvBKbqXaWNNRU8gC9jYAlrZG0L2ZvYPnATP\ngYCUZ661HLY3nA7JakzAxMUXbN7X/X4C5hy5ARC3SFfzbgIQ/Rp85I3DBcCu\nn90k\r\n=diz/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFk+cCI1iALVRMk1aGOTPJNbwIvGf6lkcq86Uege/5T3AiAUlPmcWp89QVRECASVT1IePehevSxS4VpwizUf4h7d3g=="}]},"maintainers":[{"name":"mkdudeja","email":"87manishkumar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/angular-highcharts-chart_1.0.1_1528805586808_0.9812444297199157"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.2":{"name":"angular-highcharts-chart","version":"1.0.2","description":"Minimal Highcharts wrapper for Angular (AOT Build and Angular 6 Compatible)","peerDependencies":{"@angular/common":"^6.0.0-rc.0 || ^6.0.0","@angular/core":"^6.0.0-rc.0 || ^6.0.0","highcharts":"^6.0.0 || ^6.1.0"},"repository":{"type":"git","url":"git+https://github.com/mkdudeja/angular-highcharts-chart.git"},"keywords":["Angular","Angular 6","Angular AOT","Highcharts"],"author":{"name":"mkdudeja"},"license":"ISC","bugs":{"url":"https://github.com/mkdudeja/angular-highcharts-chart/issues"},"homepage":"https://github.com/mkdudeja/angular-highcharts-chart#readme","main":"bundles/angular-highcharts-chart.umd.js","module":"fesm5/angular-highcharts-chart.js","es2015":"fesm2015/angular-highcharts-chart.js","esm5":"esm5/angular-highcharts-chart.js","esm2015":"esm2015/angular-highcharts-chart.js","fesm5":"fesm5/angular-highcharts-chart.js","fesm2015":"fesm2015/angular-highcharts-chart.js","typings":"angular-highcharts-chart.d.ts","metadata":"angular-highcharts-chart.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.9.0"},"_id":"angular-highcharts-chart@1.0.2","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"mkdudeja","email":"87manishkumar@gmail.com"},"dist":{"integrity":"sha512-kPy/al4+PpNjJpQIu0eGxUFQ8+oYY3xQdOG97Ji968o75+hjXriwIvqG0ApnTODj/+OGfEBK/c7VbLMEMn7UyA==","shasum":"af9abcb762466c8b3d1d2dc846e87cdf124f8f7f","tarball":"https://registry.npmjs.org/angular-highcharts-chart/-/angular-highcharts-chart-1.0.2.tgz","fileCount":23,"unpackedSize":72814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbH7mvCRA9TVsSAnZWagAA/P0QAIG+36zRzxHZNbkrRKuE\n1UFiDflB4cxQrZ1VYfqDrDrio0vIalzJnYFv2ewNgPUzrEhep+CwgbojbckD\nmY2XEMwSVeBQMlpAIT/0NcFYgEbt09/ikZ1APkJpI2gQPH0mEYTCdJaEgpBM\neC4lfi7opLYLPDXdR+C/rQsodlE3BI9i6Gos1/JRJmi1Zl52KPwc94sGW9ZL\nxBwvAe2N1GCljG1kaftkmaQrwwweFzN7prp21MR4ZaKdxY70zVagynbOKZL4\njh8yBqIZEwbCDSVSLP8VcPvLkmVljQHlGhXxmerRJsegmNfmXPdOGz7FuCd1\nazSHuvUvTV7oyx9XS2qx5qsfqLGnBEY8uckY/pKJogtV1sCj3rFnkMzb7uBq\ni4cXDh6+G9HBdqK7ogIC1L7Cu/vrHsHJ+MSWai2fTUgeLq8mNIbJC2LDj8iR\n2XehJ4Wqo7dMn4c5xlQIemQGP/oFNoz2P3NuUXuZPoHgRdhWIgWb1YYBGAh5\nJFSHKefxLFokJjw90BSzBlwfcOg0fdgnbN20YdkN3wx0EqA/lMB/nu8uc3Ld\nfsLLti3DTaN2L9/4wLIQb2SZ/ZgVbmbxOoc4YpGOirffXHgGdeeUwjOOcWTU\n/3HVm0pHan/hh/gU3paeN8raoVPaSiMHKptYps8qsD0P9TNEdRYysleeavNG\nuSIU\r\n=Oiuv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGU6I05967EjRIDnlmc+gnP6Y9SNpQiCvH0OOxOv0WSzAiA5bTxAXo0kO0QffQbvlwSd1qgFSsX7K1NUZoTgxQkQQQ=="}]},"maintainers":[{"name":"mkdudeja","email":"87manishkumar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/angular-highcharts-chart_1.0.2_1528805807392_0.8201977000233949"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2018-06-11T12:46:14.722Z","0.0.1":"2018-06-11T12:46:14.897Z","modified":"2023-04-18T17:18:55.829Z","0.0.2":"2018-06-11T12:55:12.149Z","1.0.0":"2018-06-12T11:45:02.842Z","1.0.1":"2018-06-12T12:13:06.887Z","1.0.2":"2018-06-12T12:16:47.470Z"},"maintainers":[{"name":"mkdudeja","email":"87manishkumar@gmail.com"}],"readme":"# Highcharts Angular\r\nMinimal Highcharts wrapper for Angular (AOT Build and Angular 6 Compatible).\r\n\r\n*Credits:* Thanks to [highcharts](https://github.com/highcharts) for their original angular wrapper named [highcharts-angular](https://github.com/highcharts/highcharts-angular). \r\n\r\nAlmost all of the documentation ported form the original repo as underlying opitons & usage guide remains the same, **excpet that this package exports module instead of component**. So, go through the usage guide once after installing the package.\r\n\r\n## Table of Contents\r\n1. [Getting started](#getting-started)\r\n    1. [General prerequisites](#general-prerequisites)\r\n    2. [Installing](#installing)\r\n    3. [Usage](#usage)\r\n    3. [Hello world demo](#hello-world-demo)\r\n2. [Options details](#options-details)\r\n3. [Highcharts instance details](#highcharts-instance-details)\r\n    1. [Core](#core)\r\n    2. [To load a module](#to-load-a-module)\r\n    3. [To load a plugin](#to-load-a-plugin)\r\n    4. [To load a map for Highmaps](#to-load-a-map-for-highmaps)\r\n    5. [To load a wrapper](#to-load-a-wrapper)\r\n    6. [To use setOptions](#to-use-setoptions)\r\n4. [Demo app](#demo-app)\r\n    1. [Play with the app](#play-with-the-app)\r\n    2. [Files to play with](#files-to-play-with)\r\n\r\n\r\n\r\n## Getting started\r\n\r\n### General prerequisites\r\n\r\nMake sure you have **node**, **NPM** and **Angular** up to date.\r\nTested and required versions:\r\n\r\n* node 8.9.4+\r\n* npm 6.1.0+\r\n* @angular/cli 6.0.0+ (Ideally, it should work with earlier versions of Angular too)\r\n\r\n### Installing\r\n\r\nIn a component that will be building your Highcharts charts you will need to [import Highcharts](https://www.highcharts.com/docs/getting-started/install-from-npm) first, so in system console, while in your Angular app:\r\n\r\n```cli\r\nnpm install highcharts --save\r\n```\r\n\r\n\r\nGet package from NPM in your Angular app:\r\n\r\n```cli\r\nnpm install angular-highcharts-chart --save\r\n```\r\n\r\n### Usage\r\nNext, code sample assumes you are integrating chart in the root module for your applictaion i.e. app.module.ts. But process holds true for any other module of applictaion where you need highchart functionality.\r\n\r\nIn your app.module.ts, import the AngularHighchartsChartModule:\r\n\r\n```ts\r\n...\r\nimport { AngularHighchartsChartModule } from 'angular-highcharts-chart';\r\n@NgModule({\r\n  imports: [\r\n    AngularHighchartsChartModule,\r\n    ...\r\n```\r\n\r\nNext, in the app.component.ts, in top lines where other `import`s are add another one for Highcharts:\r\n\r\n```ts\r\nimport * as Highcharts from 'highcharts';\r\n```\r\n\r\nIn the same file (app.component.ts) add to the **template** component selector `lib-highcharts-angular`:\r\n\r\n```html\r\n<lib-highcharts-angular \r\n  [Highcharts]=\"Highcharts\"\r\n\r\n  [constructorType]=\"chartConstructor\"\r\n  [options]=\"chartOptions\"\r\n  [callbackFunction]=\"chartCallback\"\r\n\r\n  [(update)]=\"updateFlag\"\r\n  [oneToOne]=\"oneToOneFlag\"\r\n\r\n  style=\"width: 100%; height: 400px; display: block;\"\r\n></lib-highcharts-angular>\r\n```\r\n\r\nRight side names, in double quotes, are just names of variables you are going to set next, so you could name then whatever you like. Style at the bottom of the selector is optional, but browsers do not know how to display `<lib-highcharts-angular>`, so you should set some styles.\r\n\r\nIn the same file (app.component.ts) all variables should be set in `export class AppComponent {` like:\r\n\r\n```ts\r\nexport class AppComponent {\r\n  Highcharts = Highcharts; // required\r\n  chartConstructor = 'chart'; // optional string, defaults to 'chart'\r\n  chartOptions = { ... }; // required\r\n  chartCallback = function (chart) { ... } // optional function, defaults to null\r\n  updateFlag = false; // optional boolean\r\n  oneToOneFlag = true; // optional boolean, defaults to false\r\n  ...\r\n```\r\n\r\nUsed options are explained [below](#options-details).\r\n\r\n\r\n\r\n### Hello world demo\r\n\r\nTo create a simple demo start with [installing](#installing).\r\n\r\nNext for `app.component.ts`'s HTML template use:\r\n\r\n```html\r\n<lib-highcharts-angular \r\n  [Highcharts]=\"Highcharts\"\r\n  [options]=\"chartOptions\"\r\n\r\n  style=\"width: 100%; height: 400px; display: block;\"\r\n></lib-highcharts-angular>\r\n```\r\n\r\nand export variables:\r\n\r\n```ts\r\nexport class AppComponent {\r\n  Highcharts = Highcharts;\r\n  chartOptions = {\r\n    series: [{\r\n      data: [1, 2, 3]\r\n    }]\r\n  };\r\n  ...\r\n```\r\n\r\nBuild and run your Angular app to see a basic line chart.\r\n\r\n\r\n\r\n## Options details\r\n\r\n1. `[Highcharts]=\"Highcharts\"`\r\n\r\nThe option is **required**. This is a Highcharts instance with **required core** and optional **modules**, **plugin**, **maps**, **wrappers** and set global options using **[`setOptions`](https://www.highcharts.com/docs/getting-started/how-to-set-options#2)**. More detail for the option in [the next documentation section](#highcharts-instance-details).\r\n\r\n2. `[constructorType]=\"chartConstructor\"`\r\n\r\nThe option is **optional**. This is a string for [constructor method](https://www.highcharts.com/docs/getting-started/your-first-chart). Possible values:\r\n\r\n* `'chart'` - for standard Highcharts constructor - for any Highcharts instance, this is **default value**\r\n\r\n* `'stockChart'` - for Highstock constructor - Highstock is required\r\n\r\n* `'mapChart'` - for Highmaps constructor - Highmaps or map module is required\r\n\r\n3. `[options]=\"chartOptions\"`\r\n\r\nThe option is **required**. Possible chart options could be found in [Highcharts API reference](http://api.highcharts.com/highcharts). Minimal working object that could be set for basic testing is `{ series:[{ data:[1, 2] }] }`.\r\n\r\n4. `[callbackFunction]=\"chartCallback\"`\r\n\r\nThe option is **optional**. A callback function for the created chart. First argument for the function will hold the created **chart**. Default `this` in the function points to the **chart**.\r\n\r\n5. `[(update)]=\"updateFlag\"`\r\n\r\nThe option is **optional**. A boolean to trigger update on a chart as Angular is not detecting nested changes in a object passed to a component. Set corresponding variable (`updateFlag` in the example) to `true` and after update on a chart is done it will be changed asynchronously to `false` by Highcharts-angular component.\r\n\r\n6. `[oneToOne]=\"oneToOneFlag\"`\r\n\r\nThe option is **optional**, defaults to `false`. The `oneToOne` parameter for [updates](https://api.highcharts.com/class-reference/Highcharts.Chart#update). When true, the `series`, `xAxis` and `yAxis` collections will be updated one to one, and items will be either added or removed to match the new updated options. For example, if the chart has **two** series and we call `chart.update` (and this is called on each chart's data change or if `updateFlag` is set to true) with a configuration containing **three** series, **one** will be added. If we call `chart.update` with **one** series, **one** will be removed. Setting an empty series array will remove all series, but leaving out the series property will leave all series untouched. If the series have id's, the new series options will be matched by id, and the remaining ones removed.\r\n\r\nThe options is presented in [the demo](#demo-app) in the first chart - try setting new chart options with different amounts of series in [the textarea input](https://github.com/highcharts/highcharts-angular/blob/36e158e684b5823e1b1bd1cedf75548022eba1a9/src/app/app.component.html#L7) to see this options in action.\r\n\r\n\r\n\r\n## Highcharts instance details\r\n\r\nThis is a Highcharts instance optionally with initialized **[modules](#to-load-a-module)**, **[plugins](#to-load-a-plugin)**, **[maps](#to-load-a-map-for-highmaps)**, **[wrappers](#to-load-a-wrapper)** and set **[global options](#to-use-setoptions)** using **[`setOptions`](https://www.highcharts.com/docs/getting-started/how-to-set-options#2)**. **The core is required.**\r\n\r\n### Core\r\n\r\nAs core you could load **Highcharts**, **Highstock** or **Highmaps**.\r\n\r\n* For **Highcharts**:\r\n\r\n```ts\r\nimport * as Highcharts from 'highcharts';\r\n```\r\n\r\n* For **Highstock**:\r\n\r\n```ts\r\nimport * as Highcharts from 'highcharts/highstock';\r\n```\r\n\r\n* For **Highmaps**:\r\n\r\n```ts\r\nimport * as Highcharts from 'highcharts/highmaps';\r\n```\r\nor as Highcharts with map module:\r\n```ts\r\nimport * as Highcharts from 'highcharts';\r\nimport * as HC_map from 'highcharts/modules/map';\r\nHC_map(Highcharts);\r\n```\r\n\r\n### To load a module\r\n\r\nA module is a Highcharts official addon. After Highcharts is imported using Highcharts, Highstock or Highmaps use `require` and initialize each module on the Highcharts variable.\r\n\r\n```ts\r\nimport * as Highcharts from 'highcharts';\r\nrequire('highcharts/modules/exporting')(Highcharts);\r\n```\r\n\r\nThis could be [done without `require`](https://github.com/highcharts/highcharts/issues/4994#issuecomment-305113651), but the initialization is still needed.\r\n```ts\r\nimport * as Highcharts from 'highcharts';\r\nimport * as HC_exporting from 'highcharts/modules/exporting';\r\nHC_exporting(Highcharts);\r\n```\r\n\r\n### To load a plugin\r\n\r\nA plugin is a third party/community made Highcharts addon (plugins are listed in the [Highcharts plugin registry](https://www.highcharts.com/plugin-registry)). First, make sure that a plugin support loading over NPM and load the required files. In example [Custom-Events](https://www.highcharts.com/plugin-registry/single/15/Custom-Events) supports NPM loading, so after installing the package you could initialize it like:\r\n\r\n```ts\r\nimport * as Highcharts from 'highcharts';\r\nimport * as HC_customEvents from 'highcharts-custom-events';\r\nHC_customEvents(Highcharts);\r\n```\r\n\r\nIf a plugin doesn't support loading through NPM you could treat it as a wrapper - see instructions below.\r\n\r\n### To load a map for Highmaps\r\n\r\nA map is JSON type file containing mapData code used when a chart is created. Download a map from [official Highcharts map collection](http://code.highcharts.com/mapdata/) in Javascript format or use a [custom map](https://www.highcharts.com/docs/maps/custom-maps) and add it to your app. Edit the map file, so it could be loaded like a module by adding to beginning and end of a file code below:\r\n\r\n```js\r\n(function (factory) {\r\n\tif (typeof module === 'object' && module.exports) {\r\n\t\tmodule.exports = factory;\r\n\t} else {\r\n\t\tfactory(Highcharts);\r\n\t}\r\n}(function (Highcharts) {\r\n\r\n...\r\n/* map file data */\r\n...\r\n\r\n}));\r\n```\r\n\r\nIn case of using a GeoJSON map file format you should add the above code and additionally, between the added beginning and the map file data, the below code:\r\n\r\n```js\r\nHighcharts.maps[\"myMapName\"] =\r\n```\r\nWhere `\"myMapName\"` is yours map name that will be used when creating charts. Next, you will be loading a local .js file, so you should add in `tsconfig.json` in your app `allowJs: true`:\r\n\r\n```js\r\n...\r\n\"compilerOptions\": {\r\n    \"allowJs\": true,\r\n    ...\r\n```\r\n__Notice: this is not required for all Typescript / Angular versions - you can build the demo app with `allowJs` set to `false` for some cases. This part of the documentation will be revisited after Typescript / Angular further changes regarding this issue.__\r\n\r\nThe map is ready to be imported to your app. Use `require` instead of import to prevent TS5055 errors.\r\n\r\n```ts\r\nimport * as Highcharts from 'highcharts/highmaps';\r\nrequire('./relative-path-to-the-map-file/map-file-name')(Highcharts);\r\n```\r\n\r\nWhere `relative-path-to-the-map-file` should be relative (for the module importing the map) path to the map file and `map-file-name` should be the name of the map file.\r\n\r\nThe file should be placed in a directory that is not checked by typeScript. See example in this repository:\r\n- config in 'tsconfig.json'\r\n- map file in 'js' directory\r\n\r\n### To load a wrapper\r\n\r\nA wrapper is a [custom extension](https://www.highcharts.com/docs/extending-highcharts/extending-highcharts) for Highcharts. To load a wrapper the same way as a module you could save it as a Javascript file and edit it by adding to beginning and end of a file same code as for a map:\r\n\r\n```js\r\n(function (factory) {\r\n\tif (typeof module === 'object' && module.exports) {\r\n\t\tmodule.exports = factory;\r\n\t} else {\r\n\t\tfactory(Highcharts);\r\n\t}\r\n}(function (Highcharts) {\r\n\r\n...\r\n/* wrapper code */\r\n...\r\n\r\n}));\r\n```\r\n\r\nNext, you will be loading a local .js file, so you should add in `tsconfig.json` in your app `allowJs: true`:\r\n\r\n```js\r\n...\r\n\"compilerOptions\": {\r\n    \"allowJs\": true,\r\n    ...\r\n```\r\n\r\nThe wrapper is ready to be imported to your app. Use `require` instead of import to prevent TS5055 errors.\r\n\r\n```ts\r\nimport * as Highcharts from 'highcharts';\r\nrequire('./relative-path-to-the-wrapper-file/wrapper-file-name')(Highcharts);\r\n```\r\n\r\nWhere `relative-path-to-the-wrapper-file` should be relative (for the module importing the wrapper) path to the wrapper file and `wrapper-file-name` should be the name of the wrapper file.\r\n\r\nThe file should be placed in a directory that is not checked by typeScript. See example in this repository:\r\n- config in 'tsconfig.json'\r\n- map file in 'js' directory\r\n\r\n### To use [`setOptions`](https://www.highcharts.com/docs/getting-started/how-to-set-options#2)\r\n\r\nThe best place to use `setOptions` is afer your Highcharts instance is ready and before Highcharts variable is set in the main component. Example:\r\n\r\n```\r\nimport * as Highcharts from 'highcharts/highstock';\r\nimport * as HC_map from 'highcharts/modules/map';\r\n\r\nHC_map(Highcharts);\r\n\r\nHighcharts.setOptions({\r\n  title: {\r\n    style: {\r\n      color: 'orange'\r\n    }\r\n  }\r\n});\r\n\r\n...\r\n\r\nexport class AppComponent {\r\n  Highcharts = Highcharts;\r\n``` ","readmeFilename":"README.md","description":"Minimal Highcharts wrapper for Angular (AOT Build and Angular 6 Compatible)","homepage":"https://github.com/mkdudeja/angular-highcharts-chart#readme","keywords":["Angular","Angular 6","Angular AOT","Highcharts"],"repository":{"type":"git","url":"git+https://github.com/mkdudeja/angular-highcharts-chart.git"},"author":{"name":"mkdudeja"},"bugs":{"url":"https://github.com/mkdudeja/angular-highcharts-chart/issues"},"license":"ISC"}