graphieros/vue-data-ui v3.11.2 on GitHub

VueUiQuadrant

Add the #datapoint slot, to customize datapoints on the quadrant with rich content inside a foreignObject, to achieve this kind of chart:

    <VueUiQuadrant :dataset="dataset" :config="config">
        <template #datapoint="{ datapoint }">
            <div class="w-full h-full overflow-visible">
              <GoogleIcon v-if="datapoint.name === 'google'"/>
              <!-- Etc. -->
            </div>
        </template>
    </VueUiQuadrant>

Check out an example on the docs website