solid-apexcharts

Build interactive visualizations in Solid. Powered by ApexCharts.

Quick start

Install it:

``bash
npm install apexcharts solid-apexcharts
`

Use it:

`tsx
import { SolidApexCharts } from 'solid-apexcharts';

function App() {
const [options] = createSignal({
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
},
});
const [series] = createSignal([
{
name: 'series-1',
data: [30, 40, 35, 50, 49, 60, 70, 91],
},
]);

return ;
}
`

This will render the following chart

Props

| Prop | Type | Description |
| ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 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 docs on the website. |
| type\* | String | line, area, bar, pie, donut, scatter, bubble, heatmap, radialBar, candlestick, polarArea |
| width | Number/String | Possible values for width can be 100% or 400px or 400 |
| height | Number/String | Possible values for height can be 100% or 300px or 300 |
| options | Object | The configuration object, see options on API (Reference) |

How do I update the chart?

Simple! Just change the series or any option and it will automatically re-render the chart.

Here's an example updating the chart data with some random series to illustrate the point.

`tsx
import { SolidApexCharts } from 'solid-apexcharts';

function App() {
const options = {
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
},
};
const [series, setSeries] = createSignal([
{
name: 'series-1',
data: [30, 40, 35, 50, 49, 60, 70, 91],
},
]);

onMount(() => {
const max = 90;
const min = 20;

setInterval(() => {
setSeries((prevSeries) => {
const newData = prevSeries[0].data.map(() => {
return Math.floor(Math.random() * (max - min + 1)) + min
})

return [{ name: 'series-1', data: newData }]
});
}, 1000)
})

return ;
}
`

Methods

Changing the props will automatically update the chart. You only need to call these methods to update the chart forcefully.

`tsx
import ApexCharts from 'apexcharts';

function App() {
let chartRef: ApexCharts;

function updateChart() {
chartRef.updateOptions({ colors: newColors });
}

return ;
}
`

Click here to see all available methods.

How to call methods of ApexCharts without referencing the chart element?

Target the chart by its id to call the methods from some other place

`tsx
import ApexCharts from 'apexcharts';

// or for ESM build
// import ApexCharts from 'apexcharts/dist/apexcharts.esm.js'

const [options] = createSignal({
chart: {
id: 'example',
},
// Other options
});

ApexCharts.exec('example', 'updateSeries', [
{
name: 'series-1',
data: [60, 40, 20, 50, 49, 60, 95, 72],
},
]);
``

License

MIT