graphieros/vue-data-ui v2.2.68

on GitHub

VueUiXy

Added an optional comments dataset attribute to display comments on specific datapoints.

Example:

const dataset = ref([
  name: "Serie",
  type: 'line',
  series: [10, 20, 12, 120, 14, 24],
  comments: ["", "", "", "A comment here", "", ""], // The comment corresponds to the same series index
])

You can configure comments in the config object:

const config = ref({
  chart: {
    comments: {
      show: true,
      showInTooltip: true,
      width: 200,
      offsetX: 0,
      offsetY: 0
    }
  }
})

To actually display comments on the chart, you need to use the #plot-comment slot, which gives you more control on the style:

<VueUiXy
  :dataset="dataset"
  :config="config"
>
  <template #plot-comment="{ plot }">
    <div :style="`width: 100%; text-align:center; color:${plot.color}`">
      {{ plot.comment }}
    </div>
  </template>
</VueUiXy>

We are considering rolling-out this feature to other charts where it would be useful.