vue3-apexcharts icon indicating copy to clipboard operation
vue3-apexcharts copied to clipboard

Rangebar: Deselecting all series from legend causes error

Open ShoryuKyzan opened this issue 1 year ago • 1 comments

Problem

Multi-series rangebar chart has 2 errors if you deselect all series in the legend. You must select the first series again to get the chart to function normally.

Versions

"vue": "3.3.6",
"vue3-apexcharts": "^1.4.4",

Error messages

On deselecting last series:

apexcharts.common.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')
    at s.value (apexcharts.common.js:6:362517)
    at t.value (apexcharts.common.js:6:398778)
    at t.value (apexcharts.common.js:14:37816)
    at t.eval [as create] (apexcharts.common.js:6:4477)
    at eval (apexcharts.common.js:14:42668)
    at new Promise (<anonymous>)
    at t.value (apexcharts.common.js:14:42597)
    at eval (apexcharts.common.js:6:405703)
    at new Promise (<anonymous>)
    at t.value (apexcharts.common.js:6:405463)

After that, on attempting to click anything but the first series:

apexcharts.common.js:6 Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')
    at t.value (apexcharts.common.js:6:207541)
    at t.value **(apexcharts.common.js:6:218480)

Minimal code sample

<template>
    <VueApexCharts :series="chartData2" :options="chartOptions2" />
</template>
<script setup lang="ts">
// "vue": "3.3.6",
// "vue3-apexcharts": "^1.4.4",
import VueApexCharts from "vue3-apexcharts";

const chartData = [
  {
    name: "1",
    data: [
      {
        x: "a",
        y: [Date.now() - 60 * 60 * 1000, Date.now()],
      },
      {
        x: "b",
        y: [Date.now() - 120 * 60 * 1000, Date.now()],
      },
    ],
  },
  {
    name: "2",
    data: [
      {
        x: "a",
        y: [Date.now() - 60 * 60 * 1000, Date.now()],
      },
      {
        x: "b",
        y: [Date.now() - 120 * 60 * 1000, Date.now()],
      },
    ],
  },
];

const chartOptions = {
  chart: {
    type: "rangeBar",
  },
  plotOptions: {
    bar: {
      horizontal: true,
    },
  },
  xaxis: {
    type: "datetime",
  },
};
</script>

Variant

If I have xaxis.categories list set, on deselecting the last series, get no legend and the following error:

apexcharts.common.js:6 Uncaught (in promise) Error: You have provided invalid Date format. Please provide a valid JavaScript Date
    at c (apexcharts.common.js:6:121630)
    at t.value (apexcharts.common.js:6:122789)
    at t.value (apexcharts.common.js:6:125053)
    at t.value (apexcharts.common.js:14:37104)
    at t.eval [as create] (apexcharts.common.js:6:4477)
    at eval (apexcharts.common.js:14:42668)
    at new Promise (<anonymous>)
    at t.value (apexcharts.common.js:14:42597)
    at eval (apexcharts.common.js:6:405703)
    at new Promise (<anonymous>)

ShoryuKyzan avatar Nov 10 '23 00:11 ShoryuKyzan