vue3-apexcharts
vue3-apexcharts copied to clipboard
Rangebar: Deselecting all series from legend causes error
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>)