{"repo":"apexcharts/react-apexcharts","free":true,"listed":false,"github":"https://github.com/apexcharts/react-apexcharts","clone":"git clone https://github.com/apexcharts/react-apexcharts.git","description":"📊 React Component for ApexCharts","language":"JavaScript","stars":1402,"topics":["apexcharts","react","charts","reactjs","visualizations","react-charts"],"license":null,"category":"api-integrations-sdks","readme_excerpt":"React.js wrapper for ApexCharts to build interactive visualizations in react. Download and Installation Installing via npm Usage Client-Side Usage (Traditional) To create a basic bar chart with minimal configuration, write as follows: This will render the following chart How do I update the chart? Simple! Just change the series or any option and it will automatically re-render the chart. View this example on codesandbox Server-Side Rendering (SSR) with Next.js App Router New in v2.0.0 : react-apexcharts now supports Server-Side Rendering with Next.js 13+ App Router using ApexCharts v5.5.0+. Server Component (RSC) Render charts on the server for faster initial page loads: With Client-Side Hydration For interactive charts, combine server rendering with client-side hydration: Client-Only Usage in Next.js For client-only rendering (same as before): Important: While updating the options, make sure to update the outermost property even when you need to update the nested property. ✅ Do this ❌ Not this Tree-Shaking (Smaller Bundles) 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 =5.10.1 . Full example: The core variant also has SSR and hydration counterparts: 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. Props Prop Type Description ------------- -------------","default_branch":null,"files":null,"tree":[],"storefront":"/r/apexcharts","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/apexcharts/react-apexcharts/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}