{"id":13401210,"url":"https://github.com/apexcharts/react-apexcharts","last_synced_at":"2026-10-19T13:42:46.597Z","repository":{"id":37396630,"uuid":"145422226","full_name":"apexcharts/react-apexcharts","owner":"apexcharts","description":"📊 React Component for ApexCharts","archived":false,"fork":false,"pushed_at":"2026-10-12T11:07:44.000Z","size":5072,"stargazers_count":1401,"open_issues_count":11,"forks_count":172,"subscribers_count":5,"default_branch":"master","last_synced_at":"2026-10-14T05:55:52.034Z","etag":null,"topics":["apexcharts","charts","react","react-charts","reactjs","visualizations"],"latest_commit_sha":null,"homepage":"https://apexcharts.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","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.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"accessibility":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"claude":null,"gemini":null,"cursor":null,"copilot":null,"dco":null,"cla":null,"disclosure":null}},"created_at":"2018-08-20T13:36:46.000Z","updated_at":"2026-10-12T17:03:22.000Z","dependencies_parsed_at":"2024-02-04T16:20:19.241Z","dependency_job_id":"bcd3a4f5-5a31-48a5-bf77-136f43ff46e3","html_url":"https://github.com/apexcharts/react-apexcharts","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/apexcharts/react-apexcharts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Freact-apexcharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Freact-apexcharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Freact-apexcharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Freact-apexcharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apexcharts","download_url":"https://codeload.github.com/apexcharts/react-apexcharts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Freact-apexcharts/sbom","scorecard":{"id":202274,"data":{"date":"2025-08-11","repo":{"name":"github.com/apexcharts/react-apexcharts","commit":"656a9f4722e1296bb16c88c3399f204729f79a1f"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.6,"checks":[{"name":"Maintained","score":2,"reason":"3 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":1,"reason":"Found 2/20 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":9,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/stale.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/apexcharts/react-apexcharts/stale.yml/master?enable=pin","Info:   0 out of   1 GitHub-owned GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":9,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Warn: project license file does not contain an FSF or OSI license."],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 12 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"12 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-7q7g-4xm8-89cq","Warn: Project is vulnerable to: GHSA-xffm-g5w8-qvg7","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-16T23:02:41.030Z","repository_id":37396630,"created_at":"2025-08-16T23:02:41.030Z","updated_at":"2025-08-16T23:02:41.030Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":344794859,"owners_count":38300471,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-14T02:00:06.392Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","react","react-charts","reactjs","visualizations"],"created_at":"2024-07-30T19:00:59.855Z","updated_at":"2026-10-19T13:42:46.592Z","avatar_url":"https://github.com/apexcharts.png","language":"JavaScript","funding_links":[],"categories":["Data Visualization","Uncategorized","JavaScript","Packages","React [🔝](#readme)","Charts and Maps"],"sub_categories":["Uncategorized"],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://apexcharts.com/media/react-apexcharts.png\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.com/apexcharts/react-apexcharts\"\u003e\u003cimg src=\"https://api.travis-ci.com/apexcharts/react-apexcharts.svg?branch=master\" alt=\"build\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-apexcharts\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-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=React-ApexCharts%20A%20React.js%20Chart%20library%20built%20on%20ApexCharts.js\u0026url=https://www.apexcharts.com\u0026hashtags=javascript,charts,react.js,react,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\"\u003eReact.js wrapper for \u003ca href=\"https://github.com/apexcharts/apexcharts.js\"\u003eApexCharts\u003c/a\u003e to build interactive visualizations in react.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://apexcharts.com/react-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 react-apexcharts apexcharts\n```\n\n## Usage\n\n### Client-Side Usage (Traditional)\n\n```js\nimport Chart from 'react-apexcharts'\n```\n\nTo create a basic bar chart with minimal configuration, write as follows:\n```javascript\nclass App extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      options: {\n        chart: {\n          id: 'apexchart-example'\n        },\n        xaxis: {\n          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]\n        }\n      },\n      series: [{\n        name: 'series-1',\n        data: [30, 40, 35, 50, 49, 60, 70, 91, 125]\n      }]\n    }\n  }\n  render() {\n    return (\n      \u003cChart options={this.state.options} series={this.state.series} type=\"bar\" width={500} height={320} /\u003e\n    )\n  }\n}\n```\n\nThis will render the following chart\n\u003cp align=\"center\"\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?\nSimple! Just change the `series` or any `option` and it will automatically re-render the chart.\n\u003cp align=\"center\"\u003e\u003ca href=\"https://codesandbox.io/s/mzzq3yqjqj\"\u003e\u003cimg src=\"https://apexcharts.com/media/react-chart-updation.gif\"\u003e\u003c/a\u003e\u003c/p\u003e\n\nView this example on \u003ca href=\"https://codesandbox.io/s/mzzq3yqjqj\"\u003ecodesandbox\u003c/a\u003e\n\n### Server-Side Rendering (SSR) with Next.js App Router\n\n**New in v2.0.0**: react-apexcharts now supports Server-Side Rendering with Next.js 13+ App Router using ApexCharts v5.5.0+.\n\n#### Server Component (RSC)\n\nRender charts on the server for faster initial page loads:\n\n```tsx\nimport Chart from 'react-apexcharts/server'\n\nexport default async function DashboardPage() {\n  const series = [{\n    name: 'series-1',\n    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]\n  }]\n\n  const options = {\n    chart: { id: 'apexchart-example' },\n    xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }\n  }\n\n  return (\n    \u003cChart\n      type=\"bar\"\n      series={series}\n      options={options}\n      width={500}\n      height={320}\n    /\u003e\n  )\n}\n```\n\n#### With Client-Side Hydration\n\nFor interactive charts, combine server rendering with client-side hydration:\n\n```tsx\n// app/dashboard/page.tsx (Server Component)\nimport Chart from 'react-apexcharts/server'\nimport ChartHydrate from './ChartHydrate'\n\nexport default async function DashboardPage() {\n  const series = [{ data: [30, 40, 35, 50, 49, 60, 70] }]\n  const options = { chart: { type: 'bar' }, xaxis: { categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] } }\n\n  return (\n    \u003cdiv\u003e\n      \u003cChart type=\"bar\" series={series} options={options} width={500} height={300} /\u003e\n      \u003cChartHydrate /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n```tsx\n// app/dashboard/ChartHydrate.tsx (Client Component)\n'use client'\nimport Hydrate from 'react-apexcharts/hydrate'\n\nexport default function ChartHydrate() {\n  return (\n    \u003cHydrate\n      className=\"my-chart\"\n      clientOptions={{\n        chart: {\n          animations: {\n            enabled: true,\n            speed: 800\n          }\n        }\n      }}\n    /\u003e\n  )\n}\n```\n\n#### Client-Only Usage in Next.js\n\nFor client-only rendering (same as before):\n\n```tsx\n'use client'\nimport Chart from 'react-apexcharts'\n\nexport default function ClientChart() {\n  const options = {\n    chart: { id: 'apexchart-example' },\n    xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }\n  }\n\n  const series = [{\n    name: 'series-1',\n    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]\n  }]\n\n  return \u003cChart type=\"bar\" series={series} options={options} /\u003e\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.setState({\n  options: {\n    ...this.state.options,\n    xaxis: {\n      ...this.state.options.xaxis,\n      categories: ['X1', 'X2', 'X3']\n    }\n  }\n})\n```\n\n❌ Not this\n```javascript\nthis.setState({\n  options.xaxis.categories: ['X1', 'X2', 'X3']\n})\n```\n\n\n### Tree-Shaking (Smaller Bundles)\n\n**New in v2.1.0**: Use the `/core` export to reduce your bundle size by only importing the chart types and features you actually use. This requires `apexcharts \u003e=5.10.1`.\n\n```js\n// Instead of:\nimport Chart from 'react-apexcharts'\n\n// Use the core variant:\nimport Chart from 'react-apexcharts/core'\n\n// Then manually register only what you need:\nimport 'apexcharts/bar'                  // bar / column chart type\nimport 'apexcharts/line'                 // line / area / scatter chart type\nimport 'apexcharts/features/legend'      // legend feature\nimport 'apexcharts/features/annotations' // annotations feature\n// ... etc.\n```\n\nFull example:\n\n```jsx\nimport Chart from 'react-apexcharts/core'\nimport 'apexcharts/bar'\nimport 'apexcharts/features/legend'\n\nexport default function BarChart() {\n  const series = [{ name: 'Sales', data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }]\n  const options = {\n    chart: { id: 'bar-chart' },\n    xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }\n  }\n\n  return \u003cChart type=\"bar\" series={series} options={options} width={500} height={320} /\u003e\n}\n```\n\nThe core variant also has SSR and hydration counterparts:\n\n```js\nimport Chart from 'react-apexcharts/core/server'   // Server Component (async)\nimport Hydrate from 'react-apexcharts/core/hydrate' // Client hydration\n```\n\n\u003e **Note for Vite users:** Add `resolve: { dedupe: ['apexcharts'] }` to your `vite.config.js` to prevent Vite from loading two separate ApexCharts instances when mixing imports.\n\n## Props\n\n\n| Prop        | Type           | Description  |\n| ------------- |-------------| -----|\n| **series** | `Array` | The series is a set of data. To know more about the format of the data, checkout [Series docs](https://apexcharts.com/docs/series/) on the website. |\n| **type** | `String`  | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar` |\n| **width** | `Number or String`  | Possible values for width can be `100%`, `400px` or `400` (by default is `100%`) |\n| **height** | `Number or String` | Possible values for height can be `100%`, `300px` or `300` (by default is `auto`) |\n| **options** | `Object` | The configuration object, see options on [API (Reference)](https://apexcharts.com/docs/options/chart/type/) |\n| **chartRef** | `React.RefObject` | Pass a ref to get access to the underlying ApexCharts instance for imperative API calls |\n\n## How to call methods of ApexCharts programmatically?\nSometimes, you may want to call other methods of the core ApexCharts library, and you can do so on `ApexCharts` global variable directly\n\nExample\n```js\nApexCharts.exec('reactchart-example', 'updateSeries', [{\n  data: [40, 55, 65, 11, 23, 44, 54, 33]\n}])\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 this way\n\n## What's included\n\nThe published package includes the following files.\n\n```\nreact-apexcharts/\n├── dist/\n│   ├── react-apexcharts.cjs.js          # CommonJS (default import)\n│   ├── react-apexcharts.esm.js          # ES Module (default import)\n│   ├── react-apexcharts.iife.min.js     # IIFE for browser \u003cscript\u003e tags\n│   ├── react-apexcharts.min.js          # CommonJS (backward compat alias)\n│   ├── react-apexcharts-server.esm.js   # react-apexcharts/server\n│   ├── react-apexcharts-hydrate.esm.js  # react-apexcharts/hydrate\n│   ├── react-apexcharts-core.cjs.js     # react-apexcharts/core (CJS)\n│   ├── react-apexcharts-core.esm.js     # react-apexcharts/core (ESM)\n│   ├── react-apexcharts-core-server.esm.js   # react-apexcharts/core/server\n│   └── react-apexcharts-core-hydrate.esm.js  # react-apexcharts/core/hydrate\n└── types/\n    ├── react-apexcharts.d.ts\n    ├── react-apexcharts-server.d.ts\n    ├── react-apexcharts-hydrate.d.ts\n    ├── react-apexcharts-core.d.ts\n    ├── react-apexcharts-core-server.d.ts\n    └── react-apexcharts-core-hydrate.d.ts\n```\n\n## Development\n\n#### Install dependencies\n\n```bash\nnpm install\n```\n\n## Running the example\n\nBasic example including update is included to show how to get started using ApexCharts with React easily.\n\nTo run the examples,\n```bash\ncd example\nnpm install\nnpm run start\n```\n\n#### Bundling\n\n##### To build\n\n```bash\nnpm run build\n```\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://apexcharts.com/license](https://apexcharts.com/license)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapexcharts%2Freact-apexcharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapexcharts%2Freact-apexcharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapexcharts%2Freact-apexcharts/lists"}