VueUiXy - Custom gradients
New slots are available to use custom gradients on areas and bars.
#area-gradient & #bar-gradient slots
Use these slots to inject a gradient svg element (linearGradient, radialGradient) into the pre-existing defs element of the chart.
Slots expose the series data, as well as the id that must be used on the gradient to be recognized and applied.
<VueUiXy
:dataset="dataset"
:config="config"
>
<!-- This slot is applied on all line series with useArea set to true -->
<template #area-gradient="{ series, id }">
<linearGradient :id="id" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" :stop-color="series.color"/>
<stop offset="100%" :stop-color="isDarkMode ? '#3A3A3A' : '#FFFFFF'" stop-opacity="0"/>
</linearGradient>
</template>
<!-- This slot is applied on all bar series -->
<template #bar-gradient="{ series, positiveId, negativeId }">
<!-- Gradient applied for positive datapoints -->
<linearGradient :id="positiveId" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" :stop-color="series.color"/>
<stop offset="100%" :stop-color="isDarkMode ? '#3A3A3A' : '#FFFFFF'" stop-opacity="0"/>
</linearGradient>
<!-- Gradient applied for negative datapoints -->
<linearGradient :id="negativeId" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" :stop-color="isDarkMode ? '#3A3A3A' : '#FFFFFF'" stop-opacity="0"/>
<stop offset="100%" :stop-color="series.color"/>
</linearGradient>
</template>
</VueUiXy>
