Binding chart not working when using ApexCharts at a flowbite svelte projects

Question

I want to use the ApexCharts method at a flowbite svelte projects, but it does not work

I followed the sample code from https://flowbite-svelte.com/docs/plugins/charts#Binding_chart

It is not working, i added alert(chart); before chart.updateSeries(series); It shows chart is undefined.

Also i got error at <Chart {options} bind:chart /> The error states the options are not assignable to type 'ApexOptions' (I don't know if this is the reason, but I can run fine on other chart's examples along with this error)

Answer 1

I solved the similar problem by first making option as $derived() refer: https://svelte.dev/docs/svelte/$derived

let options = $derived.by(() => ({
        chart: {
            height: '400px',
            maxWidth: '100%',
...
        series: [
                   {
                     name: 'name',
                     data: myfunction(values),
                     color: 'rgb(60, 180, 60)'
                   }
                ],

Here i have set values=$props(); which is changed based on API call. Once the option becomes derived property, simply using

<Chart {options} />

worked for me as options is now binded.