How can I display the comment labels from examples?

[TobiZog]

I've trying to create a VueUiXy chart with some comments displayed, like on the example on the official documentation website:

But I the two cards doesn't appear. I've tried exactly the same datasets and configuration from the homepage. This is the result (with mouse hovering):

How can I display the two cards permanently?

Thank you for your work!

[graphieros]

Hi @TobiZog :)

You need to use the #plot-comment scoped slot (the example uses Tailwind classes):

<VueDataUi :component="VueUiXy" :dataset="dataset" :config="config">
  <template #plot-comment="{ plot }">
   <!-- Value checks are hardcoded here but could be compared to your max and min values from the dataset passed to the component -->
    <div v-if="plot.value === 140" class="text-black dark:text-[#CCCCCC] w-full flex flex-col place-items-center text-xl bg-[#FFFFFF] dark:bg-[#4A4A4A] py-2 rounded shadow-md border border-app-green">
      <VueUiIcon name="smiley" stroke="#42d392" :size="30"/>
      {{ plot.comment }}
    </div>
    <div v-if="plot.value === 12" class="text-black dark:text-[#CCCCCC] w-full flex flex-col place-items-center text-xl bg-[#FFFFFF] dark:bg-[#4A4A4A] py-2 rounded shadow-md border border-app-orange">
      <VueUiIcon name="moodFlat" stroke="#FF6600" :size="30"/>
      {{ plot.comment }}
    </div>
  </template>
</VueDataUi>

You can check out the Slots tab in the documentation pages, which show basic examples to use slots:

This screenshot is taken from the VueUiXy docs page:

[graphieros]

@TobiZog

Thanks to your question, I improved the examples page to show when a slot is used, as just copying the dataset and config is not enough in this case.