apexcharts / vue3-apexcharts

📊 Vue-3 component for ApexCharts
MIT License
314 stars 35 forks source link

Rangebar: Deselecting all series from legend causes error #87

Open ShoryuKyzan opened 1 year ago

ShoryuKyzan commented 1 year ago

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>)
github-actions[bot] commented 3 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.