Optimization Request for VueUiDonutEvolution Component - Label Overlapping and Zero-Value Handling #187
-
|
Hello, I'm encountering an issue with the VueUiDonutEvolution component when visualizing larger datasets. Specifically: Label Overlapping: As the data set size increases, the labels/tags of smaller donut segments begin overlapping each other, significantly reducing readability. Zero-Value Visibility: Segments with zero values are still being rendered, which adds unnecessary visual clutter. Could you please advise if there are: Built-in configuration options to prevent label overlapping (e.g., dynamic positioning, collision detection, or tooltip-only labels) Methods to automatically hide zero-value segments Recommended best practices for handling large datasets in this component? Thank you for your guidance!
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
|
You did everything right. The component is currently missing a few improvements to address the issues you raised. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for response, your project is excellent. Looking forward to future improvements! |
Beta Was this translation helpful? Give feedback.
-
|
You can upgrade to v2.6.32 which adds config options to hide labels under a given threshold. This addresses the immediate overlapping issue, but is not a panacea solution. Ideally all labels should be able to be visible without overlap, which requires a rewrite with a collision detection algo. This would apply on all donuts of the library, I need to think about it. In the meantime I hope this fix helps you achieve a better result. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you , I've changed to use the stackBar, and now I'm facing another problem: <VueUiStackbar :config="stackBarConfig" :dataset="stackBarData" class="mt-4 px-1">
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
{{ datapoint }} :{{ seriesIndex }} :{{ series }} :{{ config }} :{{ bars }} :{{ lines }} :{{
plots }}
This content shows first
</template>
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
{{ datapoint }} :{{ seriesIndex }} :{{ series }} :{{ config }} :{{ bars }} :{{ lines }} :{{
plots }}
This content shows last
</template>
</VueUiStackbar>
Could you please help me out? |
Beta Was this translation helpful? Give feedback.
-
|
Indeed, content was missing for these slots in this component. Documentation website was also updated to show only available exposed variables in the slot (bars, lines and plots are not exposed for this component, only datapoint, seriesIndex, series and config) |
Beta Was this translation helpful? Give feedback.
-
|
That's great! I'll try it. Thank you so much! |
Beta Was this translation helpful? Give feedback.
@lorraine-situ
You can upgrade to v2.6.32 which adds config options to hide labels under a given threshold.
This addresses the immediate overlapping issue, but is not a panacea solution. Ideally all labels should be able to be visible without overlap, which requires a rewrite with a collision detection algo. This would apply on all donuts of the library, I need to think about it. In the meantime I hope this fix helps you achieve a better result.