VueUiStackline timeTag
Added style.chart.timeTag, following the time tag feature in VueUiXy. Enable show to display a tag below the selected datapoint, with a configurable background, text style, and circle marker on the X axis.
The tag follows hover, keyboard, external, and minimap selection. Chart selection takes priority over minimap selection, including index zero. Its horizontal position adjusts to keep the tag within the drawing area.
Added configuration
const config = computed(() => ({
style: {
chart: {
timeTag: {
show: false,
backgroundColor: '#e1e5e8',
color: '#2D353C',
fontSize: 12,
circleMarker: {
radius: 3,
color: '#2D353C',
},
useDefaultFormat: true,
timeFormat: 'yyyy-MM-dd HH:mm:ss',
customFormat: null,
},
},
},
}));Set show: true to enable the feature. With useDefaultFormat: true, the tag uses the axis time label. When the axis datetime formatter is enabled, setting useDefaultFormat: false applies timeFormat. Date formatting uses absolute indices so the tag remains correct after zooming.
customFormat accepts a callback receiving { absoluteIndex, seriesIndex, datapoint, config }. A returned string overrides the default content and supports HTML. Errors or non-string results fall back to the configured time label format.
customFormat: ({ absoluteIndex }) => `<b>Period ${absoluteIndex}</b>`;Related changes
- When
timeTag.showis false, hovering does not reveal extra labels hidden by dense-axis filtering, modulo, or first-and-last-only settings. Regular axis labels remain visible. - Added theme colors and TypeScript configuration types.