Skip to content

Charts stop working when adding series in chart options #13

@darkons

Description

@darkons

For some reason, adding series inside options object makes the chart stop working when update.

Using Laravel 10 + Inertia Vue stack.

$chart = new Chart();

return Inertia::render('Dashboard', [ 
    'chart' => fn () => $chart->setType('bar')
        ->setHeight(300)
        ->setWidth('100%')
        ->setDataset('Some name', 'bar', [1])
        ->setXaxisCategories(['Some category'])
        ->toVue()
]);
<script setup>
  defineProps({
    chart: Object,
  });
  
  const updateChart = () => {
    router.reload({
      only: ['chart'],
    })
  }
</script>

<template>
  <apexchart
    :type="chart.type"
    :width="chart.width"
    :height="chart.height"
    :series="chart.series"
    :options="chart.options"
  />
  
  <button @click="updateChart()">Update</button>
</template>

This example will break the chart throwing DOMException: Proxy object could not be cloned. in the browser console.

After commenting out this lines in Chart.php class, everything works fine:

public function setSeries(array $series): Chart
{
    $this->series = $series;

    /* $this->setOption([
        'series' => $series,
    ]); */

    return $this;
}

If you need more information, please just ask me 😉

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions