{"id":13702133,"url":"https://github.com/s0ftik3/solid-chartjs","last_synced_at":"2025-12-24T02:26:17.674Z","repository":{"id":165029600,"uuid":"640399437","full_name":"s0ftik3/solid-chartjs","owner":"s0ftik3","description":"📈 SolidJs components for Chart.js","archived":false,"fork":false,"pushed_at":"2024-07-14T02:04:02.000Z","size":424,"stargazers_count":54,"open_issues_count":1,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-24T15:02:33.573Z","etag":null,"topics":["chartjs","solid","solidjs","ui","visualization"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/solid-chartjs","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/s0ftik3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2023-05-14T00:38:05.000Z","updated_at":"2025-03-15T07:39:22.000Z","dependencies_parsed_at":"2024-01-01T16:25:56.010Z","dependency_job_id":"9811248e-a4bf-4fe8-9aff-3997f781b2d6","html_url":"https://github.com/s0ftik3/solid-chartjs","commit_stats":{"total_commits":85,"total_committers":6,"mean_commits":"14.166666666666666","dds":"0.42352941176470593","last_synced_commit":"148206c42542e220fdcfed1542dfb413f02d9f77"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":"solidjs-community/solid-lib-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0ftik3%2Fsolid-chartjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0ftik3%2Fsolid-chartjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0ftik3%2Fsolid-chartjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0ftik3%2Fsolid-chartjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s0ftik3","download_url":"https://codeload.github.com/s0ftik3/solid-chartjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252439403,"owners_count":21748000,"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","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":["chartjs","solid","solidjs","ui","visualization"],"created_at":"2024-08-02T21:00:31.593Z","updated_at":"2025-12-24T02:26:17.646Z","avatar_url":"https://github.com/s0ftik3.png","language":"TypeScript","readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=solid-chartjs\u0026background=tiles\u0026project=LIBRARY\" alt=\"solid-chartjs\"\u003e\n\u003c/p\u003e\n\n# solid-chartjs\n\n\u003cimg align=\"right\" width=\"150\" height=\"150\" alt=\"Logo\" src=\"assets/solid-chartjs-logo.png\"\u003e\n\n[![version](https://badgen.net/npm/v/solid-chartjs)](https://npmjs.com/package/solid-chartjs)\n[![downloads](https://badgen.net/npm/dm/solid-chartjs)](https://www.npmjs.com/package/solid-chartjs)\n[![telegram chat](https://img.shields.io/badge/Ask%20a%20Question-Telegram-blue)](https://t.me/solid_chartjs)\n\nThe `solid-chartjs` library is a SolidJS wrapper around the [`Chart.js`](https://www.chartjs.org) library, allowing you to easily create interactive charts in your SolidJS applications.\n\n-   [Quick start](#quick-start)\n-   [Chart Props](#chart-props)\n-   [Examples](#examples)\n-   [Credits](#credits)\n-   [Contributing](#contributing)\n    -   [Contribution Guidelines](#contribution-guidelines)\n-   [Code and Commit Standards](#code-and-commit-standards)\n-   [License](#license)\n\n## Quick start\n\nInstallation:\n\n```bash\npnpm add solid-chartjs chart.js\n# or\nyarn add solid-chartjs chart.js\n# or\nnpm i solid-chartjs chart.js\n```\n\nDemo: [solid-chartjs.vychs.com](https://solid-chartjs.vychs.com/)\n\nUsage:\n\n```tsx\nimport { onMount } from 'solid-js'\nimport { Chart, Title, Tooltip, Legend, Colors } from 'chart.js'\nimport { Line } from 'solid-chartjs'\n\nconst MyChart = () =\u003e {\n    /**\n     * You must register optional elements before using the chart,\n     * otherwise you will have the most primitive UI\n     */\n    onMount(() =\u003e {\n        Chart.register(Title, Tooltip, Legend, Colors)\n    })\n\n    const chartData = {\n        labels: ['January', 'February', 'March', 'April', 'May'],\n        datasets: [\n            {\n                label: 'Sales',\n                data: [50, 60, 70, 80, 90],\n            },\n        ],\n    }\n    const chartOptions = {\n        responsive: true,\n        maintainAspectRatio: false,\n    }\n\n    return (\n        \u003cdiv\u003e\n            \u003cLine data={chartData} options={chartOptions} width={500} height={500} /\u003e\n        \u003c/div\u003e\n    )\n}\n```\n\nIf you don't want to import and register the controllers, elements, scales, and plugins you want to use, you can use the following solution:\n\n\u003e [!NOTE]\\\n\u003e It is considered to better use the tree-shakable way, to decrease the bundle size.\n\n```tsx\nimport 'chart.js/auto'\nimport { DefaultChart } from 'solid-chartjs'\n\n\u003cDefaultChart type=\"line\" data={data} options={options} /\u003e\n```\n\n## Chart Props\n\n| Prop     | Description                                     | Type                                                                                                  |\n| -------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------- |\n| width    | The width of the chart canvas in pixels.        | number \\| undefined                                                                                   |\n| height   | The height of the chart canvas in pixels.       | number \\| undefined                                                                                   |\n| fallback | A fallback element to display when chart fails. | JSX.Element                                                                                           |\n| type     | The type of the chart.                          | keyof [ChartTypeRegistry](https://www.chartjs.org/docs/latest/api/interfaces/ChartTypeRegistry.html)  |\n| data     | The chart data object.                          | [ChartData](https://www.chartjs.org/docs/latest/api/interfaces/ChartData.html) \\| undefined           |\n| options  | The chart options object.                       | [ChartOptions](https://www.chartjs.org/docs/latest/api/interfaces/CoreChartOptions.html) \\| undefined |\n| plugins  | The chart plugins object.                       | [Plugin](https://www.chartjs.org/docs/latest/api/interfaces/Plugin.html)[] \\| undefined               |\n\n## Examples\n\nCheck out `/dev` folder and run the SolidJs application to see how it works.\n\nYou can also use the `DefaultChart` components:\n\n\u003e [!NOTE]\\\n\u003e `DefaultChart` is a wrapper around `Chart` component, so you can use all the props from `Chart` component.\n\u003e `DefaultChart` component does _not_ have its registrable elements registered by default, so you need to register them yourself unless you use `chart.js/auto`.\n\n```tsx\nimport { onMount } from 'solid-js'\nimport {\n    Chart,\n    LineController,\n    CategoryScale,\n    PointElement,\n    LineElement,\n    LinearScale,\n} from 'chart.js'\nimport { DefaultChart } from 'solid-chartjs'\n\nconst MyChart = () =\u003e {\n    onMount(() =\u003e {\n        Chart.register(LineController, CategoryScale, PointElement, LineElement, LinearScale)\n    })\n\n    // ... your data and options objects\n\n    return \u003cDefaultChart type=\"line\" data={data} options={options} width={400} height={300} /\u003e\n}\n```\n\nUsage of `fallback` prop:\n\n```tsx\nconst fallback = () =\u003e {\n    return (\n        \u003cdiv\u003e\n            \u003cp\u003eChart is not available\u003c/p\u003e\n        \u003c/div\u003e\n    )\n}\n\n\u003cDefaultChart type=\"bar\" data={chartData} options={chartOptions} fallback={fallback} /\u003e\n```\n\n## Credits\n\n-   This library is _heavily_ inspired by [react-chartjs-2](https://react-chartjs-2.js.org/)\n-   Awesome charting library [Chart.js](https://www.chartjs.org)\n-   Flexible library for building user interfaces [SolidJs](https://www.solidjs.com/)\n","funding_links":[],"categories":["📦 Components \u0026 Libraries","Integrations"],"sub_categories":["UI Components","JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs0ftik3%2Fsolid-chartjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs0ftik3%2Fsolid-chartjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs0ftik3%2Fsolid-chartjs/lists"}