himynameisdave / svelte-frappe-charts

📈 Svelte bindings for frappe-charts.
https://frappe.io/charts
MIT License
310 stars 16 forks source link

Dynamically adding dataset leads to error #59

Open LukasLoeffler opened 2 years ago

LukasLoeffler commented 2 years ago

If I have e.g. one dataset in the beginning and add another dataset to the data object by assigning the full object (in accordance to the documentation) the following error is thrown:

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'textContent')
    at e.value (AxisChart.js:426:20)
    at e.value (BaseChart.js:241:8)
    at base.svelte:59:54
    at ifChart (base.svelte:41:16)
    at $$self.$$.update (base.svelte:60:6)
    at update (index.mjs:1089:12)
    at flush (index.mjs:1060:13)

The issue only appears if the initial data holds 1 or less datasets. If changing the number of datasets from 2 to 3 no error is thrown, but the third line is not updated like the initial 2 datasets.

Code to replicate:

<script>
  import Chart from 'svelte-frappe-charts';

  let numberOfDatapoints = 25;

  let data = {
    labels: Array.from({length: numberOfDatapoints}, (x, i) => i),
    datasets: [
      {
          values: Array.from({length: numberOfDatapoints}, () => Math.floor(Math.random() * 40))
      }
    ]
  };

  let chartRef;

  function updateData() {
    data = {
      labels: Array.from({length: numberOfDatapoints}, (x, i) => i),
      datasets: [
        {
          values: Array.from({length: numberOfDatapoints}, () => Math.floor(Math.random() * 40))
        },
        {
          values: Array.from({length: numberOfDatapoints}, () => Math.floor(Math.random() * 40))
        },
      ]
    };
  }
</script>
<div style="600px">
  <Chart data={data} type="line" bind:this={chartRef} />
</div>

<button on:click={updateData}>Update Chart</button>
Laestry commented 1 year ago

same for me