v2.6.37

VueUiXy

Improve datapoint tags behavior and config options

Tags are enabled in the dataset (no change there):

const dataset = ref(
  [
    {
       name: 'Serie A',
       type: 'line',
       series: [1, 2, 3, 5, 8],
       useTag: 'end', // or 'start'; to be set on line or plot types (does not apply on bars)
    }
  ]
)

Config options are added to customize tag content:

// For line datapoints
config.line.tag.followValue: boolean; // default: true
config.line.tag.fontSize: number; // default: 14
config.line.tag.formatter: () => string | null; // default: null

// For plot datapoints
config.plot.tag.followValue: boolean; // default: true
config.plot.tag.fontSize: number; // default: 14
config.plot.tag.formatter: () => string | null; // default: null

The formatter works like all others, for example:

const config = ref({
  line: {
    tag: {
      formatter: ({ value, config }) => {
        const { datapoint, serieName } = config;
        console.log(datapoint);
        return `<div><span>${ serieName }:</span><span>${value.toFixed(1)}</span></div>`
      }
    }
  }
})