VueUiHill new component ! #369
Visualize how multiple tasks progress from "to do" to "done" while emphasizing the effort or difficulty around the midpoint. Use it for project tracking, workflow reviews, prioritization, or collaborative planning when users need to compare statuses and interactively reposition items.
Enregistrement.de.l.ecran.2026-08-04.a.08.46.57.mov
View the docs for this component
A chart maker is also available :)
Transitons standardization
CSS transitons are now standardized, with a few changes:
- To avoid any impression of CLS on load, css transitions are applied after a short customisable delay
- Transitions are forcefully disabled when prefers-reduced-motion is enabled
- Additional configuration options are addeed to some charts:
const config = {
transitions: {
enable: true, // forcefully disabled when `prefers-reduced-motion: reduce`
pauseOnLoad: true,
pauseOnDatasetChange: false,
activationDelayMs: 300
}
}Components where this additional configuration is available:
- VueUiHill
- VueUiStackline
- VueUiStackbar
- VueUiXy
- VueUiTreemap
- VueUiOnion
- VueUiHorizontalBar
- VueUiScatter
- VueUiCandlestick
- VueUiQuickChart
- VueUiRings
- VueUiDonutEvolution
- VueUiGalaxy
- VueUiStripPlot
- VueUiParallelCoordinatePlot
- VueUiHistoryPlot
- VueUiCirclePack
Dev hints
You can opt-in to have hints in your console, about the quality of your dataset, and to know if it is not adapted to the chart you are using.
This is a new config attribute present on all components of the library.
const config = {
devHints: { enable: false },
};Example of a hint on the VueUiDonut component:
