graphieros/vue-data-ui v2.2.79

on GitHub

VueUiSparkbar improvements

• New config options to display the target value, and a text for the target

config.style.layout.showTargetValue: boolean; // default: false
config.style.layout.targetValueText: string; // default: ""

• New #data-label slot to display custom data labels. This slot exposes a bar object with all the necessary data to build your own labels. If the slot is not used, default data labels will be displayed.

<VueUiSparkbar
  :dataset="dataset"
  :config="config"
>
  <template #data-label="{ bar }">
    <div style="width:100%">
      {{ bar.name }}: {{ bar.valueLabel }} / {{ bar.targetLabel }}
    </div>
  </template>
</VueUiSparkbar>