How to put text inside Donut Chart in Nativescript-Vue?

Question

Could someone please help me to put a text inside a Donut Chart in NativeScript? I use Nativescript-Vue with standard plugin nativescript-ui-chart. In the documentation there is an example of a Donut Chart with a text inside, like a calculated value from the series. I cannot find a way to build the same of any live example of it.

Example: Text inside Donut Chart

Here is my code of Donut Chart:

<RadPieChart allowAnimation="true" row="1" column="0" height="200">
    <DonutSeries v-tkPieSeries
    seriesName="chartExample"
    selectionMode="DataPoint"
    expandRadius="0.4"
    outerRadiusFactor="1"
    innerRadiusFactor="0.6"
    valueProperty="value"
    legendLabel="name"
    showLabels="false"
    :items="chartItems" />
</RadPieChart>

<script>
export default {
    props: {
        chartData: {
            type: Object,
            required: false,
            default: undefined
        },
    },
    computed: {
        chartItems() {
            return [ { name: 'front', value: this.chartData.front }, { name: 'front left', value: 100 - this.chartData.front } ]
        }
}
</script>

Answer 1

You can use a GridLayout to stack things on the z index, and put your text either to the front or behind the pie chart.

GridLayout stacks its contents by the order it is defined - the one towards the bottom of the layout will be stacked higher. For example, in the code below, since Label is defined after RadPieChart, it will be positioned above the chart.

<GridLayout rows="auto" columns="auto">
  <RadPieChart allowAnimation="true" row="1" column="0" height="200">
    <DonutSeries v-tkPieSeries
    seriesName="chartExample"
    selectionMode="DataPoint"
    expandRadius="0.4"
    outerRadiusFactor="1"
    innerRadiusFactor="0.6"
    valueProperty="value"
    legendLabel="name"
    showLabels="false"
    :items="chartItems" />
  </RadPieChart>

  <!-- whatever text you want to put inside the chart -->
  <Label text="Your text here"></Label>
</GridLayout>