[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8940":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},8940,"vue-apexcharts","apexcharts\u002Fvue-apexcharts","apexcharts","📊 Vue 2 component for ApexCharts","https:\u002F\u002Fapexcharts.com",null,"Vue",1343,130,17,3,0,54.35,"Other",false,"master",true,[7,23,24,25,26,27],"charts","data-visualization","graphs","vue-charts","vuejs","2026-06-12 04:00:42","\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Fvue-apexcharts.png\">\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fapexcharts\u002Fvue-apexcharts\u002Fblob\u002Fmaster\u002FLICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-brightgreen.svg\" alt=\"License\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Ftravis-ci.com\u002Fapexcharts\u002Fvue-apexcharts\">\u003Cimg src=\"https:\u002F\u002Fapi.travis-ci.com\u002Fapexcharts\u002Fvue-apexcharts.svg?branch=master\" alt=\"build\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-apexcharts\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-apexcharts.svg\" alt=\"ver\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fintent\u002Ftweet?text=Vue-ApexCharts%20A%20Vue.js%20Chart%20library%20built%20on%20ApexCharts.js&url=https:\u002F\u002Fwww.apexcharts.com&hashtags=javascript,charts,vue.js,vue,apexcharts\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Furl\u002Fhttp\u002Fshields.io.svg?style=social\"> \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">Vue.js wrapper for \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fapexcharts\u002Fapexcharts.js\">ApexCharts\u003C\u002Fa> to build interactive visualizations in vue.\u003C\u002Fp>\n\n\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fvue-chart-demos\u002F\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Fapexcharts-banner.png\">\u003C\u002Fa>\u003C\u002Fp>\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:\u002F\u002Fgithub.com\u002Fapexcharts\u002Fvue3-apexcharts\">vue3-apexcharts\u003C\u002Fa>\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>\n   \u003Cdiv>\n     \u003Capexchart width=\"500\" type=\"bar\" :options=\"chartOptions\" :series=\"series\">\u003C\u002Fapexchart>\n   \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\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>\u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fjavascript-chart-demos\u002Fcolumn-charts\u002F\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Ffirst-bar-chart.svg\">\u003C\u002Fa>\u003C\u002Fp>\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\u002F> Click on the below example to see this in action\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fvoyy36o7y\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Fvue-chart-updation.gif\">\u003C\u002Fa>\u003C\u002Fp>\n\n```vue\n\u003Ctemplate>\n   \u003Cdiv class=\"app\">\n     \u003Capexchart width=\"550\" type=\"bar\" :options=\"chartOptions\" :series=\"series\">\u003C\u002Fapexchart>\n     \u003Cdiv>\n       \u003Cbutton @click=\"updateChart\">Update!\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n   \u003C\u002Fdiv>\n\n\u003C\u002Ftemplate>\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(() => {\n          return Math.floor(Math.random() * (max - min + 1)) + min\n        })\n\n        const colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']\n\n        \u002F\u002F 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        \u002F\u002F 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:\u002F\u002Fapexcharts.com\u002Fdocs\u002Fseries\u002F) docs on the website. |\n| **type*** | String  | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar`, `candlestick`  |\n| **width** | Number\u002FString  | Possible values for width can be `100%` or `400px` or `400` |\n| **height** | Number\u002FString | Possible values for height can be `100%` or `300px` or `300` |\n| **options** | Object | The configuration object, see options on [API (Reference)](https:\u002F\u002Fapexcharts.com\u002Fdocs\u002Foptions\u002Fchart\u002Ftype\u002F) |\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:\u002F\u002Fapexcharts.com\u002Fdocs\u002Fmethods\u002F#updateSeries\">updateSeries\u003C\u002Fa> | Allows you to update the series array overriding the existing one |\n| \u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fdocs\u002Fmethods\u002F#updateOptions\">updateOptions\u003C\u002Fa> | Allows you to update the configuration object |\n| \u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fdocs\u002Fmethods\u002F#toggleSeries\">toggleSeries\u003C\u002Fa> | Allows you to toggle the visibility of series programatically. Useful when you have custom legend. |\n| \u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fdocs\u002Fmethods\u002F#appendData\">appendData\u003C\u002Fa> | Allows you to append new data to the series array. |\n| \u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fdocs\u002Fmethods\u002F#addtext\">addText\u003C\u002Fa> | The addText() method can be used to draw text after chart is rendered. |\n| \u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fdocs\u002Fmethods\u002F#addxaxisannotation\">addXaxisAnnotation\u003C\u002Fa> | Draw x-axis annotations after chart is rendered. |\n| \u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fdocs\u002Fmethods\u002F#addyaxisannotation\">addYaxisAnnotation\u003C\u002Fa> | Draw y-axis annotations after chart is rendered. |\n| \u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fdocs\u002Fmethods\u002F#addpointannotation\">addPointAnnotation\u003C\u002Fa> | Draw point (xy) annotations after chart is rendered. |\n\nHow to call the methods mentioned above?\n\n```html\n\u003Ctemplate>\n  \u003Cdiv class=\"example\">\n    \u003Capexchart ref=\"demoChart\" width=\"500\" :options=\"chartOptions\" :series=\"series\">\u003C\u002Fapexchart>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  functionName: function() {\n    this.$refs.demoChart.updateOptions({ colors: newColors })\n  },\n\u003C\u002Fscript>\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>chart.id\u003C\u002Fcode> 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:\u002F\u002Fapexcharts.com\u002Fdocs\u002Fmethods\u002F#exec\">here\u003C\u002Fa>\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\u002F\n├── dist\u002F\n│   └── vue-apexcharts.js\n└── src\u002F\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 \u002F> You can help by becoming a sponsor on \u003Ca href=\"https:\u002F\u002Fpatreon.com\u002Fjunedchhipa\">Patreon\u003C\u002Fa> or doing a one time donation on \u003Ca href=\"https:\u002F\u002Fpaypal.me\u002Fjunedchhipa\">PayPal\u003C\u002Fa> \u003Cbr \u002F>\n\n\u003Ca href=\"https:\u002F\u002Fpatreon.com\u002Fjunedchhipa\">\u003Cimg src=\"https:\u002F\u002Fc5.patreon.com\u002Fexternal\u002Flogo\u002Fbecome_a_patron_button.png\" alt=\"Become a Patron\" \u002F> \u003C\u002Fa>\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","vue-apexcharts 是一个基于 Vue 2 的图表组件，用于在 Vue 应用中集成 ApexCharts.js 以创建交互式数据可视化。它支持多种图表类型（如柱状图、折线图等），并提供了丰富的配置选项来满足不同需求。该组件易于安装和使用，只需通过 npm 安装后即可快速在项目中引入。其核心功能包括响应式设计、动态更新以及高度可定制的外观设置。适用于需要在网页应用中展示复杂数据关系或趋势分析的各种场景，尤其是那些已经采用了 Vue 技术栈的项目。",2,"2026-06-11 03:20:24","top_language"]