Use Apex Methods

[fabiot21]

How I can use Apex methods (https://apexcharts.com/docs/methods/#dataURI) using this svelte wrapper? Any idea?

Thanks!

[samal-rasmussen]

Just use bind:this to bind the chart to the element instead of using svelte-apexcharts. Svelte is usually pretty great about being able to just use vanilla js libraries as is.

https://svelte.dev/repl/d949a175425142d7a1504e2330b80125?version=4.2.1

<script>
    import { onMount } from 'svelte'

    let chartDiv;
    const options = {
        chart: {
            type: 'line'
        },
        series: [{
            name: 'sales',
            data: [30,40,35,50,49,60,70,91,125]
        }],
        xaxis: {
            categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
        }
    }

    onMount(async () => {
        const ApexCharts = (await import('apexcharts')).default;
        const chart = new ApexCharts(chartDiv, options);
        chart.render();
        var dataURL = chart.dataURI().then(({ imgURI, blob }) => {
            console.log('imgURI', imgURI);
        });
    });
</script>

<div style="background-color: white;" bind:this={chartDiv}></div>

[mrtkp9993]

@samal-rasmussen Is there any example for reactively updating graph in that way?

[samal-rasmussen]

Just call updateOptions on the chart.

https://svelte.dev/repl/3bb6ce173b0b4221998ae4fbc8caf116?version=4.2.1

<script>
    import { onMount } from 'svelte'

    let chartDiv;
    const options = {
        chart: {
            type: 'line'
        },
        series: [{
            name: 'sales',
            data: [30,40,35,50,49,60,70,91,125]
        }],
        xaxis: {
            categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
        }
    }
    let chart

    onMount(async () => {
        const ApexCharts = (await import('apexcharts')).default;
        chart = new ApexCharts(chartDiv, options);
        chart.render();
        var dataURL = chart.dataURI().then(({ imgURI, blob }) => {
            console.log('imgURI', imgURI);
        });
    });

    function update() {
        options.series[0].data[1] = options.series[0].data[1] + 20;
        chart.updateOptions(options);
    }
</script>

<button on:click={update}><h1>Update</h1></button>
<div style="background-color: white;" bind:this={chartDiv}></div>