Chart doesn't clear between component use

[robwestbrook]

I have a candlestick chart component. I'm selecting a stock from a list, which passes a prop containing the ticker and and a prop containing the chart data points. Working well. The problem is when I pass new props to the component, the chart add the data points to the first. Every time I click on a new stock, the chart adds the data points again. The data points do not clear between component usage.

I've tried clearing the data using both the onDestroy and beforeUpdate lifecycle functions, to no effect.

Is there a way to clear data?

[YogliB]

Does this work as expected using the vanilla JS library?

[astronautintheocean]

This worked for me:

<script>
  import { onDestroy } from 'svelte';
  import { chart } from 'svelte-apexcharts';
  
  let options = {}; // add chart options here
  
  onDestroy(() => {
    options = null;
  });
</script>

{#if options}
  // render chart here
  <div use:chart={options} />
{/if}