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 2 years 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

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.

github-actions[bot] avatar Aug 02 '24 14:08 github-actions[bot]