Svelte-ChartJS chart binding

Question

I am trying to use svelte-chartjs with chartjs-plugin-zoom. In order to programmatically adjust zoom. In order to do this you have to bind onto the element. This can be illustrated in the React-ChartJS-2 - see buttons below.

Is there a prop in svelte-chartjs to make that binding?

Something like:

<Line chartRef={myrefvar} {options} />

score 1 · Accepted Answer · answered Jan 26 '23 at 13:42

Use bind:property (tutorial) to get the chart reference » REPL

<script>
    ...

    let chartRef

    const onZoomPluse = () => {
        chartRef.zoom(1.1);
    };
</script>

<Line bind:chart={chartRef} options={options} data={data} />

<button on:click={onZoomPluse}>zoom +10%</button>

Svelte-ChartJS chart binding

1 Answers1