Improved data label granular config #289
Components:
- VueUiDonut
- VueUiWaffle
- VueUiNestedDonuts
- VueUiGalaxy
- VueUiOnion
- VueUiRings
New config attributes:
| Attr | Description | Default value |
|---|---|---|
| showValueFirst | position the value first on all labels (chart, tooltip, legend) | true |
| usePercentageParens | wrap percentage in parens | true |
| useValueParens | wrap value in parens | false |
VueUiDonut
const config = ref({
style: {
chart: {
layout: {
labels: {
dataLabels: {
showValueFirst: true,
usePercentageParens: true,
useValueParens: false,
},
},
},
},
},
});VueUiWaffle
const config = ref({
style: {
chart: {
layout: {
labels: {
dataLabels: {
showValueFirst: true,
usePercentageParens: true,
useValueParens: false,
},
},
},
},
},
});VueUiNestedDonuts
const config = ref({
style: {
chart: {
layout: {
labels: {
dataLabels: {
showValueFirst: true,
usePercentageParens: true,
useValueParens: false,
},
},
},
},
},
});VueUiGalaxy
const config = ref({
style: {
chart: {
layout: {
labels: {
dataLabels: {
showValueFirst: true,
usePercentageParens: true,
useValueParens: false,
},
},
},
},
},
});VueUiOnion
const config = ref({
style: {
chart: {
labels: {
showValueFirst: true,
usePercentageParens: true,
useValueParens: false,
},
legend: {
showValue: true,
showPercentage: true,
},
},
},
});VueUiRings
const config = ref({
style: {
chart: {
layout: {
labels: {
dataLabels: {
showValueFirst: true,
usePercentageParens: true,
useValueParens: false,
},
},
},
},
},
});