VueUiPatternSeed
New addon component to create unique patterns for your chart series, which can help series recognition for users with color vision deficiency:
| Without color blindness | With color blindness |
|---|---|
| 
|
Usage:
- Add the VueUiPatternSeed component inside the #pattern slot of your component
import { VueUiPatternSeed } from "vue-data-ui/vue-ui-pattern-seed";<VueUiHorizontalBar
:dataset
:config
>
<template #pattern="{ seriesIndex, patternId }">
<VueUiPatternSeed
v-if="seriesIndex != 0"
:id="patternId"
:seed="seriesIndex"
foreground-color="#1A1A1A"
background-color="transparent"
:max-size="24"
:min-size="16"
:disambiguator="undefined"
/>
</template>
</VueUiHorizontalBar>If the default pattern generated by your props is not good enough, you can tweak the disambiguator prop with a string or a number.
createPatternDef utility
If you are using tooltip.customFormat, or custom legends, for example, you can use this utility to create elements with the same patterns as the VueUiPatternSeed component, provided you give it the same identifiers.
// If you are using a customFormat for tooltips, you can use the provided createPatternDef utility, that returns a pattern definition you can use to customize a tooltip marker with the same pattern as your series.
import { createPatternDef } from "vue-data-ui/utils";
const config = computed(() => ({
style: {
chart: {
tooltip: {
// This is just an example. Some components will return an array for the datapoint argument.
customFormat: ({ datapoint, absoluteIndex }) => {
// Returns a <defs> SVG element
const patternDef = createPatternDef({
id: datapoint.id,
seed: absoluteIndex,
backgroundColor: datapoint.color,
foregroundColor: "#1A1A1A", // optional
maxSize: 24, // optional
minSize: 16, // optional
disambiguator: undefined, // optional
});
const marker = `<svg viewBox="0 0 100 100" height="24" width="24">
${patternDef}
<rect fill="url(#${datapoint.id})" x="0" y="0" width="100" height="100" rx="4"/>
</svg>
`;
return `<div class="flex flex-row gap-1 align-center">
${marker} ${datapoint.name}
</div>
`
}
}
}
}
}))