{"_id":"@aram-zahedi/vue-chartjs","_rev":"2-2b802ccc3ca4e28f684d5544bd1c2d7e","name":"@aram-zahedi/vue-chartjs","dist-tags":{"latest":"3.5.1"},"versions":{"3.5.1":{"name":"@aram-zahedi/vue-chartjs","version":"3.5.1","description":"Vue.js wrapper for chart.js for creating beautiful charts.","author":{"name":"Jakub Juszczak","email":"jakub@posteo.de"},"homepage":"http://vue-chartjs.org","license":"MIT","contributors":[{"name":"Thorsten Lünborg","url":"https://github.com/LinusBorg"},{"name":"Juan Carlos Alonso","url":"https://github.com/jcalonso"}],"maintainers":[{"name":"aram-zahedi","email":"aram1376@yahoo.com"}],"repository":{"type":"git","url":"git+ssh://git@github.com/apertureless/vue-chartjs.git"},"bugs":{"url":"https://github.com/apertureless/vue-chartjs/issues"},"keywords":["ChartJs","Vue","Visualisation","Wrapper","Charts"],"main":"dist/vue-chartjs.js","unpkg":"dist/vue-chartjs.min.js","module":"es/index.js","jsnext:main":"es/index.js","typings":"types/index.d.ts","scripts":{"dev":"node build/dev-server.js","build":"yarn run release && yarn run build:es","build:es":"cross-env BABEL_ENV=es babel src --out-dir es","e2e":"node test/e2e/runner.js","lint":"eslint --ext .js,.vue src test/unit/specs test/e2e/specs","release":"cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js","prepublishOnly":"","docs:dev":"vuepress dev docs","docs:build":"vuepress build docs"},"peerDependencies":{"chart.js":">= 2.5"},"dependencies":{"@types/chart.js":"^2.7.55"},"devDependencies":{"@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42","@babel/preset-env":"^7.0.0-beta.42","@babel/preset-stage-2":"^7.0.0-beta.42","@types/chart.js":"^2.7.55","babel-loader":"8.0.0-beta.0","chai":"^3.5.0","chart.js":"^3.5.0","chromedriver":"^2.28.0","connect-history-api-fallback":"^1.1.0","cross-env":"^5.1.1","cross-spawn":"^5.1.0","css-loader":"^0.28.0","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-friendly-formatter":"^2.0.7","eslint-loader":"^1.7.1","eslint-plugin-html":"^2.0.1","eslint-plugin-import":"^2.2.0","eslint-plugin-node":"^4.2.2","eslint-plugin-promise":"^3.5.0","eslint-plugin-standard":"^3.0.1","eventsource-polyfill":"^0.9.6","express":"^4.15.2","extract-text-webpack-plugin":"^3.0.1","file-loader":"^0.10.1","friendly-errors-webpack-plugin":"^1.6.1","function-bind":"^1.0.2","html-webpack-plugin":"^2.28.0","http-proxy-middleware":"^0.17.4","inject-loader":"^3.0.0","isparta":"^4.0.0","jasmine-core":"^2.5.2","json-loader":"^0.5.4","karma":"^1.5.0","karma-coverage":"^1.1.1","karma-jasmine":"^1.0.2","karma-mocha":"^1.2.0","karma-phantomjs-launcher":"^1.0.4","karma-phantomjs-shim":"^1.4.0","karma-sinon-chai":"^1.2.0","karma-sourcemap-loader":"^0.3.7","karma-spec-reporter":"0.0.30","karma-webpack":"2","lolex":"^1.6.0","mocha":"^3.1.0","opn":"^5.1.0","ora":"^1.2.0","phantomjs-prebuilt":"^2.1.13","portfinder":"^1.0.13","selenium-server":"^3.3.1","shelljs":"^0.7.7","sinon":"^2.1.0","sinon-chai":"^2.9.0","url-loader":"^0.5.8","vue":"2.5.17","vue-hot-reload-api":"2.3.1","vue-html-loader":"^1.2.4","vue-loader":"^14.2.1","vue-style-loader":"4.1.2","vue-template-compiler":"2.5.17","vuepress":"^0.14.4","webpack":"^3.7.1","webpack-dev-middleware":"^1.10.1","webpack-hot-middleware":"^2.17.1","webpack-merge":"^4.1.0"},"engines":{"node":">=6.9.0","npm":">= 3.0.0"},"browserify":{"transform":["babelify"]},"greenkeeper":{"ignore":["extract-text-webpack-plugin","karma-webpack","webpack","webpack-merge"]},"directories":{"doc":"docs"},"gitHead":"3d7cfbe1870386a1ef1179627ac053f631859a88","_id":"@aram-zahedi/vue-chartjs@3.5.1","_nodeVersion":"12.22.6","_npmVersion":"7.15.0","dist":{"integrity":"sha512-9CqW0ZmyNCB61CyXmND2ar3Twt1MElYceQPeDLXNXTMxEY7tB2fU7BSSGUD5AzlWVU2qTR7t8gbspdKe0NTVpA==","shasum":"79d4375fd1c2c586684bec098de507cddcd18fce","tarball":"https://registry.npmjs.org/@aram-zahedi/vue-chartjs/-/vue-chartjs-3.5.1.tgz","fileCount":27,"unpackedSize":80077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwy86CRA9TVsSAnZWagAAe/gP/iObVy8Kn9Kok4IHbKri\ndBJWs7Rf5n/dMZSepLNoFaLw0INWzwJn5jB/OCm+T0ejcMI0ouqYnzSOiJwk\nNP/u6KyYIO7PZGhmBf8hVzOmz/bpMmSpFa+j7wG+pjfexOQP7YEYj8gtL7js\nnL+mRpI37WBYQRuN2oRE39gYrODg7QpUx6iLN6+5qCFo8KMI5BQLIQXU03H4\nQtrIkeKEBZ0A8zQw28FdhtLxS9zUstv95EurGvB0PctghGc4I2vOfa7ffKY1\ncqSSqp8l2d+D0F4ergpdOKLzobitFJxbj5dBD3LKCPevVLD3HQAzNOtWvWTx\nGSD1kN/nTK46pxdj3oNGZFwOFeDJjICX9uKCidvquJYXOaGUKKows/EeKCBj\nhNPtyXwUYSfOvr5MtNJQ8Ta/xG0cyzFf/qplcJUfZ8iXl7Vzhis2i+xnYtmE\nC2ENSVmwjLo+zvCGkCF+WX3aVI9yXXUcrWM7cXkCT/1oiq91mrLzxKMHxDKF\nxkRDPxZn5s+osotXZoRAOYR3yZJGtQHwxYrB0yBrxejr0dU4a+JtTyX9aanA\nqECWYrvkDkSe7z0hkN0+Te4mcvv+W2GIJ8vM+gUg5e38EcmFzbHplE9gptC5\nhPujVIkzRFIu5ZF09sp4Ca9ClwWWVmm3L5oy62OLHhX+6a/CFGzqPJpCMqrN\nKc2K\r\n=tNMo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjJnchtOZSJPFAhZNdsx7Qkx5ZS1q4B1w3tIlW4sfElgIgQbEzbS82AN4zxHPM4Ojc0ElBfEoLlpgu5H4uTjkifVc="}]},"_npmUser":{"name":"aram-zahedi","email":"aram1376@yahoo.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-chartjs_3.5.1_1634321067757_0.11279955929838903"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-15T18:04:27.708Z","3.5.1":"2021-10-15T18:04:28.016Z","modified":"2022-04-04T15:14:56.705Z"},"maintainers":[{"name":"aram-zahedi","email":"aram1376@yahoo.com"}],"description":"Vue.js wrapper for chart.js for creating beautiful charts.","homepage":"http://vue-chartjs.org","keywords":["ChartJs","Vue","Visualisation","Wrapper","Charts"],"repository":{"type":"git","url":"git+ssh://git@github.com/apertureless/vue-chartjs.git"},"contributors":[{"name":"Thorsten Lünborg","url":"https://github.com/LinusBorg"},{"name":"Juan Carlos Alonso","url":"https://github.com/jcalonso"}],"author":{"name":"Jakub Juszczak","email":"jakub@posteo.de"},"bugs":{"url":"https://github.com/apertureless/vue-chartjs/issues"},"license":"MIT","readme":"<div align=\"center\">\n  <img width=\"256\" heigth=\"256\" src=\"/assets/vue-chartjs.png\" alt=\"vue-chartjs logo\">\n</div>\n\n[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)\n[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)\n[![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs)\n[![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)\n[![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs)\n[![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)\n[![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs)\n[![Known Vulnerabilities](https://snyk.io/test/github/apertureless/vue-chartjs/badge.svg)](https://snyk.io/test/github/apertureless/vue-chartjs)\n[![Maintainability](https://api.codeclimate.com/v1/badges/8c0256b16ba7a50a9f93/maintainability)](https://codeclimate.com/github/apertureless/vue-chartjs/maintainability)\n[![Donate](assets/donate.svg)](https://www.paypal.me/apertureless/50eur)\n[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)\n\n# vue-chartjs\n\n**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.\n\n## Demo & Docs\n\n- 📺 [Demo](http://demo.vue-chartjs.org/)\n- 📖 [Docs](http://vue-chartjs.org/)\n\n### Compatibility\n\n- v1 later `@legacy`\n  - Vue.js 1.x\n- v2 later\n  - Vue.js 2.x\n\nAfter the final release of vue.js 2, you also get the v2 by default if you install vue-chartjs over npm.\nNo need for the @next tag anymore. If you want the v1 you need to define the version or use the legacy tag.\nIf you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.x)\n\n## Install\n\n- **yarn** install: `yarn add vue-chartjs chart.js@2.9.4`\n- **npm** install: `npm install vue-chartjs chart.js@2.9.4`\n\nOr if you want to use it directly in the browser add\n\n```html\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js\"></script>\n<script src=\"https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js\"></script>\n```\nto your scripts. See [Codepen](https://codepen.io/apertureless/pen/zEvvWM)\n\n\n### Browser\nYou can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/zEvvWM). For this case, please use the `vue-chartjs.min.js` which is the minified version. You also need to add the Chart.js CDN script.\n\nYou can then simply register your component:\n\n```js\nVue.component('line-chart', {\n  extends: VueChartJs.Line,\n  mounted () {\n    this.renderChart({\n      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n      datasets: [\n        {\n          label: 'Data One',\n          backgroundColor: '#f87979',\n          data: [40, 39, 10, 40, 39, 80, 40]\n        }\n      ]\n    }, {responsive: true, maintainAspectRatio: false})\n  }\n})\n```\n\n## How to use\n\nYou need to import the component and then either use `extends` or `mixins` and add it.\n\nYou can import the whole package or each module individual.\n\n```javascript\nimport VueCharts from 'vue-chartjs'\nimport { Bar, Line } from 'vue-chartjs'\n```\n\nJust create your own component.\n\n```javascript\n// CommitChart.js\nimport { Bar } from 'vue-chartjs'\n\nexport default {\n  extends: Bar,\n  mounted () {\n    // Overwriting base render method with actual data.\n    this.renderChart({\n      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],\n      datasets: [\n        {\n          label: 'GitHub Commits',\n          backgroundColor: '#f87979',\n          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]\n        }\n      ]\n    })\n  }\n}\n```\n\nor in TypeScript\n\n```ts\n// CommitChart.ts\nimport { Component, Mixins } from 'vue-property-decorator'\nimport { Bar, mixins } from 'vue-chartjs';\nimport { Component } from 'vue-property-decorator';\n\n@Component({\n    extends: Bar, // this is important to add the functionality to your component\n    mixins: [mixins.reactiveProp]\n})\nexport default class CommitChart extends Mixins(mixins.reactiveProp, Bar) {\n  mounted () {\n    // Overwriting base render method with actual data.\n    this.renderChart({\n      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],\n      datasets: [\n        {\n          label: 'GitHub Commits',\n          backgroundColor: '#f87979',\n          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]\n        }\n      ]\n    })\n  }\n}\n```\n\nThen simply import and use your own extended component and use it like a normal vue component\n\n```javascript\nimport CommitChart from 'path/to/component/CommitChart'\n```\n\n## Another Example with options\n\nYou can overwrite the default chart options. Just pass the options object as a second parameter to the render method\n\n```javascript\n// MonthlyIncome.vue\nimport { Line } from 'vue-chartjs'\n\nexport default {\n  extends: Line,\n  props: ['data', 'options'],\n  mounted () {\n    this.renderChart(this.data, this.options)\n  }\n}\n```\n\nUse it in your vue app\n\n```javascript\nimport MonthlyIncome from 'path/to/component/MonthlyIncome'\n\n<template>\n  <monthly-income :data={....} />\n</template>\n\n<script>\nexport default {\n  components: { MonthlyIncome },\n  ....\n}\n</script>\n```\n\n## Reactivity\n\nChart.js does not update or re-render the chart if new data is passed.\nHowever, you can simply implement this on your own or use one of the two mixins which are included.\n\n- `reactiveProp`\n- `reactiveData`\n\nBoth are included in the `mixins` module.\n\nThe mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.\nHowever, keep in mind the limitations of vue and javascript for mutations on arrays and objects.\n**It is important that you pass your options in a local variable named `options`!**\nThe reason is that if the mixin re-renders the chart it calls `this.renderChart(this.chartData, this.options)` so don't pass in the options object directly or it will be ignored.\n\nMore info [here](https://vue-chartjs.org/guide/#updating-charts)\n\n```javascript\n// MonthlyIncome.js\nimport { Line, mixins } from 'vue-chartjs'\n\nexport default {\n  extends: Line,\n  mixins: [mixins.reactiveProp],\n  props: ['chartData', 'options'],\n  mounted () {\n    this.renderChart(this.chartData, this.options)\n  }\n}\n\n```\n\n### Mixins module\nThe `mixins` module is included in the `VueCharts` module and as a separate module.\nSome ways to import them:\n\n```javascript\n// Load complete module with all charts\nimport VueCharts from 'vue-chartjs'\n\nexport default {\n  extends: VueCharts.Line,\n  mixins: [VueCharts.mixins.reactiveProp],\n  props: ['chartData', 'options'],\n  mounted () {\n    this.renderChart(this.chartData, this.options)\n  }\n}\n```\n\n```javascript\n// Load separate modules\nimport { Line, mixins } from 'vue-chartjs'\n\nexport default {\n  extends: Line,\n  mixins: [mixins.reactiveProp],\n  props: ['chartData', 'options'],\n  mounted () {\n    this.renderChart(this.chartData, this.options)\n  }\n}\n```\n\n```javascript\n// Load separate modules with destructure assign\nimport { Line, mixins } from 'vue-chartjs'\nconst { reactiveProp } = mixins\n\nexport default {\n  extends: Line,\n  mixins: [reactiveProp],\n  props: ['chartData', 'options'],\n  mounted () {\n    this.renderChart(this.chartData, this.options)\n  }\n}\n```\n\n## Single File Components\n\nYou can create your components in Vues single file components. However it is important that you **do not** have the `<template></template>` included. Because Vue can't merge templates. And the template is included in the mixin. If you leave the template tag in your component, it will overwrite the one which comes from the base chart and you will have a blank screen.\n\n## Available Charts\n\n### Bar Chart\n\n![Bar](assets/bar.png)\n\n### Line Chart\n\n![Line](assets/line.png)\n\n### Doughnut\n\n![Doughnut](assets/doughnut.png)\n\n### Pie\n\n![Pie](assets/pie.png)\n\n### Radar\n\n![Pie](assets/radar.png)\n\n### Polar Area\n\n![Pie](assets/polar.png)\n\n### Bubble\n\n![Bubble](assets/bubble.png)\n\n### Scatter\n\n![Scatter](assets/scatter.png)\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# run unit tests\nnpm run unit\n\n# run e2e tests\nnpm run e2e\n\n# run all tests\nnpm test\n```\n\nFor a detailed explanation of how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).\n\n## Contributing\n\n1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create a new Pull Request\n\n## License\n\nThis software is distributed under [MIT license](LICENSE.txt).\n\n<a href=\"https://www.buymeacoffee.com/xcqjaytbl\" target=\"_blank\"><img src=\"https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" ></a>\n","readmeFilename":"README.md"}