solid-apexcharts

Build interactive visualizations in Solid. Powered by ApexCharts.

Quick start

Install it:

1npm install apexcharts solid-apexcharts

Use it:

1import { SolidApexCharts } from 'solid-apexcharts';
2
3function App() {
4  const [options] = createSignal({
5    xaxis: {
6      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
7    },
8  });
9  const [series] = createSignal([
10    {
11      name: 'series-1',
12      data: [30, 40, 35, 50, 49, 60, 70, 91],
13    },
14  ]);
15
16  return <SolidApexCharts width="500" type="bar" options={options()} series={series()} />;
17}

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.

1import { SolidApexCharts } from 'solid-apexcharts';
2
3function App() {
4  const options = {
5    xaxis: {
6      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
7    },
8  };
9  const [series, setSeries] = createSignal([
10    {
11      name: 'series-1',
12      data: [30, 40, 35, 50, 49, 60, 70, 91],
13    },
14  ]);
15
16  onMount(() => {
17    const max = 90;
18    const min = 20;
19
20    setInterval(() => {
21      setSeries((prevSeries) => {
22        const newData = prevSeries[0].data.map(() => {
23          return Math.floor(Math.random() * (max - min + 1)) + min
24        })
25
26        return [{ name: 'series-1', data: newData }]
27      });
28    }, 1000)
29  })
30
31  return <SolidApexCharts type="bar" options={options} series={series()} />;
32}

Methods

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

1import ApexCharts from 'apexcharts';
2
3function App() {
4  let chartRef: ApexCharts;
5
6  function updateChart() {
7    chartRef.updateOptions({ colors: newColors });
8  }
9
10  return <SolidApexCharts ref={chartRef} />;
11}

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

1import ApexCharts from 'apexcharts';
2
3// or for ESM build
4// import ApexCharts from 'apexcharts/dist/apexcharts.esm.js'
5
6const [options] = createSignal({
7  chart: {
8    id: 'example',
9  },
10  // Other options
11});
12
13ApexCharts.exec('example', 'updateSeries', [
14  {
15    name: 'series-1',
16    data: [60, 40, 20, 50, 49, 60, 95, 72],
17  },
18]);

SolidStart

To use this component in SolidStart, you need to wrap your chart components with the clientOnly function, making sure that the component is only rendered on the client side:

1import { clientOnly } from '@solidjs/start';
2
3const MyChart = clientOnly(() => import('~/components/Chart'));
4
5export default function Home() {
6  return <MyChart fallback={<div>Loading</div>} />;
7}

License

MIT