graphieros/vue-data-ui v3.18.1 on GitHub

VueUiXy #331

Improve datapoint labels display options:

enable multiline labels through the formatter:

const config = computed(() => {
    return {
        bar: {
            labels: {
                formatter: ({ value }) => `My prefix\n${value}`
            }
        }
    }
})

The formatter can now also return arrays, that will be converted into line breaks:

const config = computed(() => {
    return {
        bar: {
            labels: {
                formatter: ({ value }) => ['My prefix', value]
            }
        }
    }
})

New config options to adjust label placement:

const config = computed(() => {
    return {
        bar: {
            labels: {
                formatter: ({ value }) => ['My prefix', value],
                offsetX: 0,
                rotation: 0,
                textAnchor: null, // or 'start' | 'middle' | 'end'
                alwaysOnTop: false // if true, will always position the label on top of the datapoint (can be handy for bar types when mixing positive and negative values)
            }
        }
    }
})

Tip

The same options are applied for the 3 series types (bar, line, plot)

Documentation website is up to date