\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`, `polarArea` |\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## How do I update the chart?\n\nSimple! Just change the `series` or any `option` and it will automatically re-render the chart.\n\nHere's an example updating the chart data with some random series to illustrate the point.\n\n```tsx\nimport { SolidApexCharts } from 'solid-apexcharts';\n\nfunction App() {\n const options = {\n xaxis: {\n categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],\n },\n };\n const [series, setSeries] = createSignal([\n {\n name: 'series-1',\n data: [30, 40, 35, 50, 49, 60, 70, 91],\n },\n ]);\n\n onMount(() => {\n const max = 90;\n const min = 20;\n\n setInterval(() => {\n setSeries((prevSeries) => {\n const newData = prevSeries[0].data.map(() => {\n return Math.floor(Math.random() * (max - min + 1)) + min\n })\n\n return [{ name: 'series-1', data: newData }]\n });\n }, 1000)\n })\n\n return ;\n}\n```\n\n## Methods\n\nChanging the props will automatically update the chart. You only need to call these methods to update the chart forcefully.\n\n```tsx\nimport ApexCharts from 'apexcharts';\n\nfunction App() {\n let chartRef: ApexCharts;\n\n function updateChart() {\n chartRef.updateOptions({ colors: newColors });\n }\n\n return ;\n}\n```\n\n[Click here](https://apexcharts.com/docs/methods) to see all available methods.\n\n## How to call methods of ApexCharts without referencing the chart element?\n\nTarget the chart by its `id` to call the methods from some other place\n\n```tsx\nimport ApexCharts from 'apexcharts';\n\n// or for ESM build\n// import ApexCharts from 'apexcharts/dist/apexcharts.esm.js'\n\nconst [options] = createSignal({\n chart: {\n id: 'example',\n },\n // Other options\n});\n\nApexCharts.exec('example', 'updateSeries', [\n {\n name: 'series-1',\n data: [60, 40, 20, 50, 49, 60, 95, 72],\n },\n]);\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}
![\"solid-apexcharts\"](\"https://assets.solidjs.com/banner?type=solid-apexcharts&background=tiles&project=%20\")
\n![](\"https://raw.githubusercontent.com/wobsoriano/solid-apexcharts/main/chartexample.svg\")