{"id":13531983,"url":"https://github.com/wobsoriano/solid-apexcharts","last_synced_at":"2025-08-28T19:09:44.703Z","repository":{"id":57365862,"uuid":"458083550","full_name":"wobsoriano/solid-apexcharts","owner":"wobsoriano","description":"Solid component for ApexCharts","archived":false,"fork":false,"pushed_at":"2024-12-27T18:49:26.000Z","size":589,"stargazers_count":68,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-28T19:02:34.070Z","etag":null,"topics":["apexcharts","charts","solid"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wobsoriano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"wobsoriano"}},"created_at":"2022-02-11T07:16:28.000Z","updated_at":"2025-04-18T04:10:42.000Z","dependencies_parsed_at":"2023-11-07T19:38:02.330Z","dependency_job_id":"73a9eb7d-69f3-4741-819d-7088c77f0f6b","html_url":"https://github.com/wobsoriano/solid-apexcharts","commit_stats":{"total_commits":60,"total_committers":1,"mean_commits":60.0,"dds":0.0,"last_synced_commit":"0d9238e5dcb5c55af1ecdeea9c6e03b28e50ec90"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":"solidjs-community/solid-lib-starter","purl":"pkg:github/wobsoriano/solid-apexcharts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsolid-apexcharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsolid-apexcharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsolid-apexcharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsolid-apexcharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wobsoriano","download_url":"https://codeload.github.com/wobsoriano/solid-apexcharts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsolid-apexcharts/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268423885,"owners_count":24248114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"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","solid"],"created_at":"2024-08-01T07:01:07.383Z","updated_at":"2025-08-28T19:09:44.695Z","avatar_url":"https://github.com/wobsoriano.png","language":"TypeScript","funding_links":["https://github.com/sponsors/wobsoriano"],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=solid-apexcharts\u0026background=tiles\u0026project=%20\" alt=\"solid-apexcharts\"\u003e\n\u003c/p\u003e\n\n# solid-apexcharts\n\nBuild interactive visualizations in Solid. Powered by [ApexCharts](https://apexcharts.com/).\n\n## Quick start\n\nInstall it:\n\n```bash\nnpm install apexcharts solid-apexcharts\n```\n\nUse it:\n\n```tsx\nimport { SolidApexCharts } from 'solid-apexcharts';\n\nfunction App() {\n  const [options] = createSignal({\n    xaxis: {\n      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],\n    },\n  });\n  const [series] = createSignal([\n    {\n      name: 'series-1',\n      data: [30, 40, 35, 50, 49, 60, 70, 91],\n    },\n  ]);\n\n  return \u003cSolidApexCharts width=\"500\" type=\"bar\" options={options()} series={series()} /\u003e;\n}\n```\n\nThis will render the following chart\n\n\u003cp\u003e\u003cimg src=\"https://raw.githubusercontent.com/wobsoriano/solid-apexcharts/main/chartexample.svg\" /\u003e\u003c/p\u003e\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(() =\u003e {\n    const max = 90;\n    const min = 20;\n\n    setInterval(() =\u003e {\n      setSeries((prevSeries) =\u003e {\n        const newData = prevSeries[0].data.map(() =\u003e {\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 \u003cSolidApexCharts type=\"bar\" options={options} series={series()} /\u003e;\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 \u003cSolidApexCharts ref={chartRef} /\u003e;\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwobsoriano%2Fsolid-apexcharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwobsoriano%2Fsolid-apexcharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwobsoriano%2Fsolid-apexcharts/lists"}