solid-chartjs


The solid-chartjs library is a SolidJS wrapper around the Chart.js library, allowing you to easily create interactive charts in your SolidJS applications.

- Quick start
- Chart Props
- Examples
- Credits
- Contributing
- Contribution Guidelines
- Code and Commit Standards
- 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

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 |
| data | The chart data object. | ChartData \| undefined |
| options | The chart options object. | ChartOptions \| undefined |
| plugins | The chart plugins object. | Plugin[] \| 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 (


)
}


``

Credits

- This library is _heavily_ inspired by react-chartjs-2
- Awesome charting library Chart.js
- Flexible library for building user interfaces SolidJs