Use Apex Methods

[Fabio Traverso]

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

Thanks!

[Sámal 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>

[Murat Koptur]

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

[Sámal 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>