Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/s0ftik3/solid-chartjs
📈 SolidJs components for Chart.js
https://github.com/s0ftik3/solid-chartjs
chartjs solid solidjs ui visualization
Last synced: 3 months ago
JSON representation
📈 SolidJs components for Chart.js
- Host: GitHub
- URL: https://github.com/s0ftik3/solid-chartjs
- Owner: s0ftik3
- License: mit
- Created: 2023-05-14T00:38:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-14T02:04:02.000Z (4 months ago)
- Last Synced: 2024-07-15T02:10:35.210Z (4 months ago)
- Topics: chartjs, solid, solidjs, ui, visualization
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/solid-chartjs
- Size: 414 KB
- Stars: 43
- Watchers: 1
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome - solid-chartjs
- awesome-solid-js - Solid Chart.js - chartjs)) (📦 Components & Libraries / UI Components)
README
# solid-chartjs
[](https://npmjs.com/package/solid-chartjs)
[](https://www.npmjs.com/package/solid-chartjs)
[](https://t.me/solid_chartjs)
The `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.
- [Quick start](#quick-start)
- [Chart Props](#chart-props)
- [Examples](#examples)
- [Credits](#credits)
- [Contributing](#contributing)
- [Contribution Guidelines](#contribution-guidelines)
- [Code and Commit Standards](#code-and-commit-standards)
- [License](#license)
## Quick start
Installation:
```bash
pnpm add solid-chartjs chart.js
# or
yarn add solid-chartjs chart.js
# or
npm i solid-chartjs chart.js
```
Demo: [solid-chartjs.vychs.com](https://solid-chartjs.vychs.com/)
Usage:
```tsx
import { onMount } from 'solid-js'
import { Chart, Title, Tooltip, Legend, Colors } from 'chart.js'
import { Line } from 'solid-chartjs'
const MyChart = () => {
/**
* You must register optional elements before using the chart,
* otherwise you will have the most primitive UI
*/
onMount(() => {
Chart.register(Title, Tooltip, Legend, Colors)
})
const chartData = {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [
{
label: 'Sales',
data: [50, 60, 70, 80, 90],
},
],
}
const chartOptions = {
responsive: true,
maintainAspectRatio: false,
}
return (
)
}
```
If you don't want to import and register the controllers, elements, scales, and plugins you want to use, you can use the following solution:
> [!NOTE]\
> It is considered to better use the tree-shakable way, to decrease the bundle size.
```tsx
import 'chart.js/auto'
import { DefaultChart } from 'solid-chartjs'
```
## Chart Props
| Prop | Description | Type |
| -------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| width | The width of the chart canvas in pixels. | number \| undefined |
| height | The height of the chart canvas in pixels. | number \| undefined |
| fallback | A fallback element to display when chart fails. | JSX.Element |
| type | The type of the chart. | keyof [ChartTypeRegistry](https://www.chartjs.org/docs/latest/api/interfaces/ChartTypeRegistry.html) |
| data | The chart data object. | [ChartData](https://www.chartjs.org/docs/latest/api/interfaces/ChartData.html) \| undefined |
| options | The chart options object. | [ChartOptions](https://www.chartjs.org/docs/latest/api/interfaces/CoreChartOptions.html) \| undefined |
| plugins | The chart plugins object. | [Plugin](https://www.chartjs.org/docs/latest/api/interfaces/Plugin.html)[] \| undefined |
## Examples
Check out `/dev` folder and run the SolidJs application to see how it works.
You can also use the `DefaultChart` components:
> [!NOTE]\
> `DefaultChart` is a wrapper around `Chart` component, so you can use all the props from `Chart` component.
> `DefaultChart` component does _not_ have its registrable elements registered by default, so you need to register them yourself unless you use `chart.js/auto`.
```tsx
import { onMount } from 'solid-js'
import {
Chart,
LineController,
CategoryScale,
PointElement,
LineElement,
LinearScale,
} from 'chart.js'
import { DefaultChart } from 'solid-chartjs'
const MyChart = () => {
onMount(() => {
Chart.register(LineController, CategoryScale, PointElement, LineElement, LinearScale)
})
// ... your data and options objects
return
}
```
Usage of `fallback` prop:
```tsx
const fallback = () => {
return (
Chart is not available
)
}
```
## Credits
- This library is _heavily_ inspired by [react-chartjs-2](https://react-chartjs-2.js.org/)
- Awesome charting library [Chart.js](https://www.chartjs.org)
- Flexible library for building user interfaces [SolidJs](https://www.solidjs.com/)