graphieros/vue-data-ui v2.2.69 on GitHub

VueUiDonut & VueUiParallelCoordinatePlot

Added dataset and config options to display comments for specific datapoints.
Comments can be optionally visible in the tooltip too.

VueUiDonut example:

const dataset = ref([
  {
    name: 'Serie 1',
    values: [100],
    comment: 'A comment for this datapoint'
  },
  {
    name: 'Serie 2',
    values: [50]
  }
])

VueUiParallelCoordinatePlot example:

const dataset = ref([
  {
    name: 'Series 1',
    shape: 'triangle',
    series: [
      {
        name: 'Item 1.1',
        values: [1200, 300, 12, 1.2],
        comments: ['', '', 'A comment for this datapoint', ''] // Comment will be visible under the datapoint with value 12
      },
      {...}
    ]
  },
  {...}
])

You can configure comments in the config object:

const config = ref({
  style: {
    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:

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

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

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