github graphieros/vue-data-ui v3.29.1

one hour ago

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.show is 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.

Docs are up to date

Don't miss a new vue-data-ui release

NewReleases is sending notifications on new releases.