[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3323":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":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},3323,"apexcharts.js","apexcharts\u002Fapexcharts.js","apexcharts","📊 Interactive JavaScript Charts built on SVG","https:\u002F\u002Fapexcharts.com",null,"JavaScript",15098,1376,120,329,0,8,44.42,"Other",false,"main",true,[24,25,26,27,28,29,30],"charts","data-visualization","graphs","interactive","javascript","svg","visualization","2026-06-12 02:00:48","\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Fapexcharts-logo.png\">\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Ftravis-ci.com\u002Fapexcharts\u002Fapexcharts.js\">\u003Cimg src=\"https:\u002F\u002Fapi.travis-ci.com\u002Fapexcharts\u002Fapexcharts.js.svg?branch=master\" alt=\"build\" \u002F>\u003C\u002Fa>\n  \u003Cimg alt=\"downloads\" src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fapexcharts.svg\"\u002F>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fapexcharts\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fapexcharts.svg\" alt=\"ver\">\u003C\u002Fa>\n  \u003Cimg alt=\"size\" src=\"https:\u002F\u002Fbadgen.net\u002Fbundlephobia\u002Fmin\u002Fapexcharts?label=size\">\n  \u003Ca href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fapexcharts@3.12.0\u002Ftypes\u002Fapexcharts.d.ts\">\u003Cimg src=\"https:\u002F\u002Fbadgen.net\u002Fnpm\u002Ftypes\u002Fapexcharts\"\u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fprettier\u002Fprettier\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fcode_style-prettier-ff69b4.svg?style=flat-square\" alt=\"prettier\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002Fapexcharts\">\u003Cimg src=\"https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002Fapexcharts\u002Fbadge\" alt=\"jsdelivr\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fintent\u002Ftweet?text=Create%20visualizations%20with%20this%20free%20and%20open-source%20JavaScript%20Chart%20library&url=https:\u002F\u002Fwww.apexcharts.com&hashtags=javascript,charts,visualizations,developers,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\">A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Packed with the features that you expect, ApexCharts includes over a dozen chart types that deliver beautiful, responsive visualizations in your apps and dashboards.\u003C\u002Fp>\n\n\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fjavascript-chart-demos\u002F\">\u003Cimg\n      src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Fapexcharts-banner.png\">\u003C\u002Fa>\u003C\u002Fp>\n\n\u003Cbr \u002F>\n\n## Download and Installation\n\n##### Installing via npm\n\n```bash\nnpm install apexcharts --save\n```\n\n##### Direct <script> include\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fapexcharts\">\u003C\u002Fscript>\n```\n\n## Wrappers for Vue\u002FReact\u002FAngular\u002FStencil\n\nIntegrate easily with 3rd party frameworks\n\n- [vue-apexcharts](https:\u002F\u002Fgithub.com\u002Fapexcharts\u002Fvue-apexcharts)\n- [react-apexcharts](https:\u002F\u002Fgithub.com\u002Fapexcharts\u002Freact-apexcharts)\n- [ng-apexcharts](https:\u002F\u002Fgithub.com\u002Fapexcharts\u002Fng-apexcharts) - Plugin by [Morris Janatzek](https:\u002F\u002Fmorrisj.net\u002F)\n- [stencil-apexcharts](https:\u002F\u002Fgithub.com\u002Fapexcharts\u002Fstencil-apexcharts)\n\n### Unofficial Wrappers\n\nUseful links to wrappers other than the popular frameworks mentioned above\n\n- [apexcharter](https:\u002F\u002Fgithub.com\u002FdreamRs\u002Fapexcharter) - Htmlwidget for ApexCharts\n- [apexcharts.rb](https:\u002F\u002Fgithub.com\u002Fstyd\u002Fapexcharts.rb) - Ruby wrapper for ApexCharts\n- [larapex-charts](https:\u002F\u002Fgithub.com\u002FArielMejiaDev\u002Flarapex-charts) - Laravel wrapper for ApexCharts\n- [blazor-apexcharts](https:\u002F\u002Fgithub.com\u002Fapexcharts\u002FBlazor-ApexCharts) - Blazor wrapper for ApexCharts [demo](https:\u002F\u002Fapexcharts.github.io\u002FBlazor-ApexCharts\u002F)\n- [svelte-apexcharts](https:\u002F\u002Fgithub.com\u002Fgalkatz373\u002Fsvelte-apexcharts) - Svelte wrapper for ApexCharts\n\n\n## Usage\n\n### Client-Side (Browser)\n\n```js\nimport ApexCharts from 'apexcharts'\n```\n\nTo create a basic bar chart with minimal configuration, write as follows:\n\n```js\nvar options = {\n  chart: {\n    type: 'bar'\n  },\n  series: [\n    {\n      name: 'sales',\n      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]\n    }\n  ],\n  xaxis: {\n    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]\n  }\n}\n\nvar chart = new ApexCharts(document.querySelector('#chart'), options)\nchart.render()\n```\n\n### Server-Side Rendering (SSR)\n\nApexCharts now supports SSR for Next.js, Nuxt, SvelteKit, Astro, and other meta-frameworks:\n\n```js\nimport ApexCharts from 'apexcharts\u002Fssr'\n\nconst chartHTML = await ApexCharts.renderToHTML({\n  series: [{ data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }],\n  chart: { type: 'bar' },\n  xaxis: {\n    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]\n  }\n}, {\n  width: 500,\n  height: 300\n})\n\n\u002F\u002F Returns hydration-ready HTML with embedded SVG\n```\n\n```js\n\u002F\u002F Client-side hydration (makes chart interactive)\nimport ApexCharts from 'apexcharts\u002Fclient'\n\n\u002F\u002F Hydrate specific chart\nApexCharts.hydrate(document.getElementById('my-chart'))\n\n\u002F\u002F Or hydrate all charts on the page\nApexCharts.hydrateAll()\n```\n\nThis will render the following chart\n\n\u003Cp align=\"center\">\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### Tree-shaking — ship only what you use\n\nBy default `import ApexCharts from 'apexcharts'` includes everything. If you want a smaller bundle, import from `apexcharts\u002Fcore` and add only the chart types and features you need:\n\n```js\nimport ApexCharts from 'apexcharts\u002Fcore'   \u002F\u002F bare class — no chart types, no features\n\n\u002F\u002F Import by the exact chart type name you use in { chart: { type: '...' } }\nimport 'apexcharts\u002Fline'\nimport 'apexcharts\u002Fbar'\n\u002F\u002F import 'apexcharts\u002Farea'\n\u002F\u002F import 'apexcharts\u002Fscatter'\n\n\u002F\u002F Optional features\nimport 'apexcharts\u002Ffeatures\u002Flegend'\nimport 'apexcharts\u002Ffeatures\u002Ftoolbar'      \u002F\u002F zoom\u002Fpan toolbar\n\u002F\u002F import 'apexcharts\u002Ffeatures\u002Fexports'      \u002F\u002F SVG\u002FPNG\u002FCSV download\n\u002F\u002F import 'apexcharts\u002Ffeatures\u002Fannotations'\n\u002F\u002F import 'apexcharts\u002Ffeatures\u002Fkeyboard'     \u002F\u002F keyboard navigation\n```\n\n**Vite users:** Vite's dependency pre-bundler can create two separate copies of ApexCharts, causing `\"chart type X is not registered\"` errors even when the import is present. Fix this by listing all apexcharts sub-entries in `optimizeDeps.include`:\n\n```js\n\u002F\u002F vite.config.js\nexport default {\n  optimizeDeps: {\n    include: [\n      'apexcharts\u002Fcore',\n      'apexcharts\u002Fline',   \u002F\u002F add only the ones you import\n      'apexcharts\u002Fbar',\n      'apexcharts\u002Ffeatures\u002Flegend',\n      'apexcharts\u002Ffeatures\u002Ftoolbar',\n      \u002F\u002F ...\n    ],\n  },\n}\n```\n\nSee [tree-shaking](https:\u002F\u002Fapexcharts.com\u002Fdocs\u002Ftree-shaking\u002F) for the full guide.\n\n### A little more than the basic\n\nYou can create a combination of different charts, sync them and give your desired look with unlimited possibilities.\nBelow is an example of synchronized charts with github style.\n\n\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fjavascript-chart-demos\u002Farea-charts\u002Fgithub-style\u002F\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Fgithub-charts.gif\">\u003C\u002Fa>\u003C\u002Fp>\n\n## Interactivity\n\nZoom, Pan, and Scroll through data. Make selections and load other charts using those selections.\nAn example showing some interactivity\n\n\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fcodepen.io\u002Fapexcharts\u002Fpen\u002FQrbEQg\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Finteractivity.gif\" alt=\"interactive chart\">\u003C\u002Fa>\u003C\u002Fp>\n\n## Dynamic Series Update\n\nAnother approach is to Drill down charts where one selection updates the data of other charts.\nAn example of loading dynamic series into charts is shown below\n\n\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fjavascript-chart-demos\u002Fcolumn-charts\u002Fdynamic-loaded-chart\u002F\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Fdynamic-selection.gif\" alt=\"dynamic-loading-chart\" \u002F>\u003C\u002Fa>\u003C\u002Fp>\n\n## Annotations\n\nAnnotations allow you to write custom text on specific values or on axes values. Valuable to expand the visual appeal of your chart and make it more informative.\n\n\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fdocs\u002Fannotations\u002F\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Fannotations.png\" alt=\"annotations\" \u002F>\u003C\u002Fa>\u003C\u002Fp>\n\n## Mixed Charts\n\nYou can combine more than one chart type to create a combo\u002Fmixed chart. Possible combinations can be line\u002Farea\u002Fcolumn together in a single chart. Each chart type can have its own y-axis.\n\n\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fjavascript-chart-demos\u002Fmixed-charts\u002F\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002Fline-column-area-mixed-chart.svg\" alt=\"annotations\" width=\"490\" \u002F>\u003C\u002Fa>\u003C\u002Fp>\n\n## Candlestick\n\nUse a candlestick chart (a common financial chart) to describe price changes of a security, derivative, or currency. The below image shows how you can use another chart as a brush\u002Fpreview pane which acts as a handle to browse the main candlestick chart.\n\n\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fjavascript-chart-demos\u002Fcandlestick-charts\u002F\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Fcandlestick.png\" alt=\"candlestick\" width=\"490\" \u002F>\u003C\u002Fa>\u003C\u002Fp>\n\n## Heatmaps\n\nUse Heatmaps to represent data through colors and shades. Frequently used with bigger data collections, they are valuable for recognizing patterns and areas of focus.\n\n\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fjavascript-chart-demos\u002Fheatmap-charts\u002F\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Fheatmap-charts.png\" alt=\"heatmap\" \u002F>\u003C\u002Fa>\u003C\u002Fp>\n\n## Gauges\n\nThe tiny gauges are an important part of a dashboard and are useful in displaying single-series data. A demo of these gauges:\n\n\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fjavascript-chart-demos\u002Fradialbar-charts\u002F\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Fradialbars-gauges.png\" width=\"490\" alt=\"radialbar-chart\" \u002F>\u003C\u002Fa>\u003C\u002Fp>\n\n## Sparklines\n\nUtilize sparklines to indicate trends in data, for example, occasional increments or declines, monetary cycles, or to feature the most extreme and least values:\n\n\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fjavascript-chart-demos\u002Fsparklines\u002F\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Fsparklines.png\" alt=\"sparkline-chart\" \u002F>\u003C\u002Fa>\u003C\u002Fp>\n\n\n## Need Advanced Data Grid for your next project?\nWe partnered with Infragistics, creators of the fastest data grids on the planet! Ignite UI Grids can handle unlimited rows and columns of data while providing access to custom templates and real-time data updates.\n\n\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fwww.infragistics.com\u002Fproducts\u002Fignite-ui-angular\u002Fangular\u002Fcomponents\u002Fgrid\u002Fgrid\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fapexcharts.com\u002Fmedia\u002Finfragistics-data-grid.png\" \u002F>\u003C\u002Fa>\u003C\u002Fp>\n\nFeaturing an intuitive API for easy theming and branding, you can quickly bind to data with minimal hand-on coding. The grid is available in most of your favorite frameworks:\n\n\u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.infragistics.com\u002Fproducts\u002Fignite-ui-angular\u002Fangular\u002Fcomponents\u002Fgrid\u002Fgrid\">Angular Data Grid\u003C\u002Fa> | \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.infragistics.com\u002Fproducts\u002Fignite-ui-react\u002Freact\u002Fcomponents\u002Fgrids\">React Data Grid\u003C\u002Fa> | \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.infragistics.com\u002Fproducts\u002Fignite-ui-blazor\u002Fblazor\u002Fcomponents\u002Fdata-grid\">Blazor Data Grid\u003C\u002Fa> | \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.infragistics.com\u002Fproducts\u002Fignite-ui-web-components\u002Fweb-components\u002Fcomponents\u002Fdata-grid\">Web Components DataGrid\u003C\u002Fa> | \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.igniteui.com\u002Fgrid\u002Foverview\">jQuery Data Grid \u003C\u002Fa>\n\n## What's included\n\nThe download bundle includes the following files and directories providing a minified single file in the dist folder. Every asset including icon\u002Fcss is bundled in the js itself to avoid loading multiple files.\n\n```\napexcharts\u002F\n├── dist\u002F\n│   └── apexcharts.min.js\n├── src\u002F\n│   ├── assets\u002F\n│   ├── charts\u002F\n│   ├── modules\u002F\n│   ├── utils\u002F\n│   └── apexcharts.js\n└── samples\u002F\n```\n\n## Development\n\n#### Install dependencies and run the project\n\n```bash\nnpm install\nnpm run dev\n```\n\nThis will start the webpack watch and any changes you make to `src` folder will auto-compile and output will be produced in the `dist` folder.\n\nMore details in [Contributing Guidelines](CONTRIBUTING.md).\n\n#### Minifying the src\n\n```bash\nnpm run build\n```\n\n## Where do I go next?\n\nHead over to the \u003Ca href=\"https:\u002F\u002Fapexcharts.com\u002Fdocs\u002F\">documentation\u003C\u002Fa> section to read more about how to use different kinds of charts and explore all options.\n\n## Contacts\n\nEmail: \u003Ca href=\"info@apexcharts.com\">info@apexcharts.com\u003C\u002Fa>\n\nTwitter: \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fapexcharts\">@apexcharts\u003C\u002Fa>\n\nFacebook: \u003Ca href=\"https:\u002F\u002Ffacebook.com\u002Fapexcharts\">fb.com\u002Fapexcharts\u003C\u002Fa>\n\n## License\n\nApexCharts is offered under a **dual-license model** to support individuals, startups, and commercial products of all sizes.\nRead full license agreements here: [https:\u002F\u002Fapexcharts.com\u002Flicense](https:\u002F\u002Fapexcharts.com\u002Flicense)\n","ApexCharts.js 是一个基于SVG的交互式JavaScript图表库，用于创建美观且响应式的数据可视化。它提供了简单易用的API和超过12种图表类型，支持动态更新、缩放和平移等高级功能，同时兼容多种前端框架如Vue、React、Angular和Stencil，方便开发者快速集成到项目中。适用于需要高质量数据展示的应用场景，比如仪表盘、报告系统以及任何需要直观呈现复杂信息的Web应用。",2,"2026-06-11 02:53:31","top_language"]