shadcn-vue
shadcn-vue copied to clipboard
[Bug]: Bar Chart: Tooltip is not shown (when data has missing category values?)
Reproduction
Use the data from below and setup the component as explained
Describe the bug
I am getting a couple of these errors upon loading my web page with several bar charts: Cannot read properties of undefined (reading 'update') and the tooltip is not shown at all.
I am not sure if this error is triggered cause of this, but do I have to have a value for every entry category or is something like this also okay:
const groups = [
{
"time": "14:13:10:313 Europe/Berlin",
"Frontend Time": 7.317
},
{
"time": "14:13:12:382 Europe/Berlin",
"Backend Time": 1.6179999999999999
},
{
"time": "14:13:35:703 Europe/Berlin",
"Backend Time": 3.559,
"Frontend Time": 7.612
},
{
"time": "14:13:36:280 Europe/Berlin",
"Frontend Time": 2.320
}
]
Everything else works though. I can see the legend correctly and deselect and select the categories correctly.
You can test it with the following parameters and component:
const selectedTimers = ['Backend Time', 'Frontend Time']
<BarChart
:data="groups"
index="time"
:categories="selectedTimers.map(transformTimerKey)"
:y-formatter="(tick) => {
return `${tick} s`
}"
:x-formatter="(tick, i) => {
return groups[Number(tick)] ? groups[Number(tick)].time.replace(/ [A-Za-z_]+\/[A-Za-z_]+$/, '') : ''
}"
:show-tooltip="true"
:rounded-corners="4"
/>
System Info
System:
OS: macOS 15.3.1
CPU: (8) arm64 Apple M1 Pro
Memory: 153.14 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.12.2 - /usr/local/bin/node
Yarn: 1.22.22 - ~/node_modules/.bin/yarn
npm: 10.5.0 - /usr/local/bin/npm
bun: 1.1.4 - ~/.bun/bin/bun
Browsers:
Chrome: 133.0.6943.127
Safari: 18.3
Contributes
- [ ] I am willing to submit a PR to fix this issue
- [ ] I am willing to submit a PR with failing tests