chart.jschartjs-plugin-zoomsvelte-chartjs

Svelte-ChartJS chart binding

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} />
Solution

  • 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>