{"id":13674869,"url":"https://github.com/apexcharts/vue-apexcharts","last_synced_at":"2025-05-13T19:03:01.914Z","repository":{"id":37405854,"uuid":"144196414","full_name":"apexcharts/vue-apexcharts","owner":"apexcharts","description":"📊 Vue 2 component for ApexCharts","archived":false,"fork":false,"pushed_at":"2025-04-28T11:23:30.000Z","size":997,"stargazers_count":1345,"open_issues_count":5,"forks_count":134,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-05-05T13:13:11.590Z","etag":null,"topics":["apexcharts","charts","data-visualization","graphs","vue-charts","vuejs"],"latest_commit_sha":null,"homepage":"https://apexcharts.com","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apexcharts.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-08-09T19:43:06.000Z","updated_at":"2025-04-28T11:23:28.000Z","dependencies_parsed_at":"2023-11-11T14:27:38.324Z","dependency_job_id":"5649ddf2-1378-47ed-8a4d-6540fa76c260","html_url":"https://github.com/apexcharts/vue-apexcharts","commit_stats":{"total_commits":151,"total_committers":17,"mean_commits":8.882352941176471,"dds":0.3973509933774835,"last_synced_commit":"7f29c6647b1e7229007403abbc8294df8e2d5a84"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Fvue-apexcharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Fvue-apexcharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Fvue-apexcharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Fvue-apexcharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apexcharts","download_url":"https://codeload.github.com/apexcharts/vue-apexcharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253025411,"owners_count":21842415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apexcharts","charts","data-visualization","graphs","vue-charts","vuejs"],"created_at":"2024-08-02T11:01:05.514Z","updated_at":"2025-05-13T19:03:01.883Z","avatar_url":"https://github.com/apexcharts.png","language":"Vue","funding_links":["https://patreon.com/junedchhipa","https://paypal.me/junedchhipa"],"categories":["Vue","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Charts"],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://apexcharts.com/media/vue-apexcharts.png\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/apexcharts/vue-apexcharts/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-brightgreen.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.com/apexcharts/vue-apexcharts\"\u003e\u003cimg src=\"https://api.travis-ci.com/apexcharts/vue-apexcharts.svg?branch=master\" alt=\"build\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-apexcharts\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-apexcharts.svg\" alt=\"ver\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?text=Vue-ApexCharts%20A%20Vue.js%20Chart%20library%20built%20on%20ApexCharts.js\u0026url=https://www.apexcharts.com\u0026hashtags=javascript,charts,vue.js,vue,apexcharts\"\u003e\u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\"\u003e \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eVue.js wrapper for \u003ca href=\"https://github.com/apexcharts/apexcharts.js\"\u003eApexCharts\u003c/a\u003e to build interactive visualizations in vue.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://apexcharts.com/vue-chart-demos/\"\u003e\u003cimg src=\"https://apexcharts.com/media/apexcharts-banner.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\n## Download and Installation\n\n##### Installing via npm\n\n```bash\nnpm install --save apexcharts\nnpm install --save vue-apexcharts\n```\nIf you're looking for Vue 3.x.x compatibile component, check-out \u003ca href=\"https://github.com/apexcharts/vue3-apexcharts\"\u003evue3-apexcharts\u003c/a\u003e\n\n## Usage\n```js\nimport VueApexCharts from 'vue-apexcharts'\nVue.use(VueApexCharts)\n\nVue.component('apexchart', VueApexCharts)\n```\n\nTo create a basic bar chart with minimal configuration, write as follows:\n```vue\n\u003ctemplate\u003e\n   \u003cdiv\u003e\n     \u003capexchart width=\"500\" type=\"bar\" :options=\"chartOptions\" :series=\"series\"\u003e\u003c/apexchart\u003e\n   \u003c/div\u003e\n\u003c/template\u003e\n```\n\n```js\n\nexport default {\n    data: function() {\n      return {\n        chartOptions: {\n          chart: {\n            id: 'vuechart-example'\n          },\n          xaxis: {\n            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]\n          }\n        },\n        series: [{\n          name: 'series-1',\n          data: [30, 40, 35, 50, 49, 60, 70, 91]\n        }]\n      }\n    },\n};\n```\n\nThis will render the following chart\n\u003cp\u003e\u003ca href=\"https://apexcharts.com/javascript-chart-demos/column-charts/\"\u003e\u003cimg src=\"https://apexcharts.com/media/first-bar-chart.svg\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n### How do I update the chart?\n\nSimple! Just change the `series` or any `option` and it will automatically re-render the chart. \u003cbr/\u003e Click on the below example to see this in action\n\u003cp\u003e\u003ca href=\"https://codesandbox.io/s/voyy36o7y\"\u003e\u003cimg src=\"https://apexcharts.com/media/vue-chart-updation.gif\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n```vue\n\u003ctemplate\u003e\n   \u003cdiv class=\"app\"\u003e\n     \u003capexchart width=\"550\" type=\"bar\" :options=\"chartOptions\" :series=\"series\"\u003e\u003c/apexchart\u003e\n     \u003cdiv\u003e\n       \u003cbutton @click=\"updateChart\"\u003eUpdate!\u003c/button\u003e\n    \u003c/div\u003e\n   \u003c/div\u003e\n\n\u003c/template\u003e\n```\n\n```js\nexport default {\n    data: function() {\n      return {\n        chartOptions: {\n          chart: {\n            id: 'vuechart-example',\n          },\n          xaxis: {\n            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],\n          },\n        },\n        series: [{\n          name: 'series-1',\n          data: [30, 40, 45, 50, 49, 60, 70, 81]\n        }]\n      }\n    },\n    methods: {\n      updateChart() {\n        const max = 90;\n        const min = 20;\n        const newData = this.series[0].data.map(() =\u003e {\n          return Math.floor(Math.random() * (max - min + 1)) + min\n        })\n\n        const colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']\n\n        // Make sure to update the whole options config and not just a single property to allow the Vue watch catch the change.\n        this.chartOptions = {\n          colors: [colors[Math.floor(Math.random()*colors.length)]]\n        };\n        // In the same way, update the series option\n        this.series = [{\n          data: newData\n        }]\n      }\n    }\n};\n```\n\n\n**Important:** While updating the options, make sure to update the outermost property even when you need to update the nested property.\n\n✅ Do this\n```javascript\nthis.chartOptions = {...this.chartOptions, ...{\n    xaxis: {\n        labels: {\n           style: {\n             colors: ['red']\n           }\n        }\n    }\n}}\n```\n\n❌ Not this\n```javascript\nthis.chartOptions.xaxis = {\n    labels: {\n        style: {\n          colors: ['red']\n        }\n    }\n}}\n```\n\n## Props\n\n| Prop        | Type           | Description  |\n| ------------- |-------------| -----|\n| **series***| Array | The series is an array which accepts an object in the following format. To know more about the format of dataSeries, checkout [Series](https://apexcharts.com/docs/series/) docs on the website. |\n| **type*** | String  | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar`, `candlestick`  |\n| **width** | Number/String  | Possible values for width can be `100%` or `400px` or `400` |\n| **height** | Number/String | Possible values for height can be `100%` or `300px` or `300` |\n| **options** | Object | The configuration object, see options on [API (Reference)](https://apexcharts.com/docs/options/chart/type/) |\n\n\n## Methods\n\nYou don't actually need to call updateSeries() or updateOptions() manually. Changing the props will automatically update the chart. You only need to call these methods to update the chart forcefully.\n\n| Method        | Description    |\n| ------------- | -----|\n| \u003ca href=\"https://apexcharts.com/docs/methods/#updateSeries\"\u003eupdateSeries\u003c/a\u003e | Allows you to update the series array overriding the existing one |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#updateOptions\"\u003eupdateOptions\u003c/a\u003e | Allows you to update the configuration object |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#toggleSeries\"\u003etoggleSeries\u003c/a\u003e | Allows you to toggle the visibility of series programatically. Useful when you have custom legend. |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#appendData\"\u003eappendData\u003c/a\u003e | Allows you to append new data to the series array. |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#addtext\"\u003eaddText\u003c/a\u003e | The addText() method can be used to draw text after chart is rendered. |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#addxaxisannotation\"\u003eaddXaxisAnnotation\u003c/a\u003e | Draw x-axis annotations after chart is rendered. |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#addyaxisannotation\"\u003eaddYaxisAnnotation\u003c/a\u003e | Draw y-axis annotations after chart is rendered. |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#addpointannotation\"\u003eaddPointAnnotation\u003c/a\u003e | Draw point (xy) annotations after chart is rendered. |\n\nHow to call the methods mentioned above?\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"example\"\u003e\n    \u003capexchart ref=\"demoChart\" width=\"500\" :options=\"chartOptions\" :series=\"series\"\u003e\u003c/apexchart\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  functionName: function() {\n    this.$refs.demoChart.updateOptions({ colors: newColors })\n  },\n\u003c/script\u003e\n```\n\n## How to call methods of ApexCharts without referencing the chart element?\n\nSometimes, you may want to call methods of the core ApexCharts library from some other place, and you can do so on `this.$apexcharts` global variable directly. You need to target the chart by \u003ccode\u003echart.id\u003c/code\u003e while calling this method\n\nExample\n```js\nthis.$apexcharts.exec('vuechart-example', 'updateSeries', [{\n  data: [40, 55, 65, 11, 23, 44, 54, 33]\n}])\n```\nIn the above method, `vuechart-example` is the ID of chart, `updateSeries` is the name of the method you want to call and the third parameter is the new Series you want to update.\n\nMore info on the `.exec()` method can be found \u003ca href=\"https://apexcharts.com/docs/methods/#exec\"\u003ehere\u003c/a\u003e\n\nAll other methods of ApexCharts can be called the same way.\n\n## What's included\n\nThe repository includes the following files and directories.\n\n```\nvue-apexcharts/\n├── dist/\n│   └── vue-apexcharts.js\n└── src/\n    ├── ApexCharts.component.js\n    ├── Utils.js\n    └── index.js\n```\n\n## Running the examples\n\nBasic Examples are included to show how to get started using ApexCharts with Vue easily.\n\nTo run the examples,\n```bash\ncd example\nnpm install\nnpm run serve\n```\n\n## Development\n\n#### Install dependencies\n\n```bash\nnpm install\n```\n\n#### Bundling\n\n```bash\nnpm run build\n```\n\n\n## Supporting ApexCharts\nApexCharts is an open source project. \u003cbr /\u003e You can help by becoming a sponsor on \u003ca href=\"https://patreon.com/junedchhipa\"\u003ePatreon\u003c/a\u003e or doing a one time donation on \u003ca href=\"https://paypal.me/junedchhipa\"\u003ePayPal\u003c/a\u003e \u003cbr /\u003e\n\n\u003ca href=\"https://patreon.com/junedchhipa\"\u003e\u003cimg src=\"https://c5.patreon.com/external/logo/become_a_patron_button.png\" alt=\"Become a Patron\" /\u003e \u003c/a\u003e\n\n## License\n\nVue-ApexCharts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapexcharts%2Fvue-apexcharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapexcharts%2Fvue-apexcharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapexcharts%2Fvue-apexcharts/lists"}