Display Value with Label

[MiDAS]

I am using a donut chart and have data with wide varying data values. This means that some of the individual segments can be very small. I would like to display the value next to each label e.g. Active [890], Backlog [2156], Rejected [2].

I need this for both labels around the chart or in the Legend on charts where I only display the legend.

Attached chart shows an example of my chart. The yellow highlights are where I'd like the data value to appear.

Thanks

[Hetali]

Hello,

In order to modify the Series label and Legend label to show the value with the text, use the content property of the SeriesLabelsComponent and the labels property of the LegendComponent. For example:

<kendo-chart [style.height.px]="200" [transitions]="false">
  <kendo-chart-series>
  <kendo-chart-series-item type="donut" [data]="data">
    <kendo-chart-series-item-labels
      [content]="labelContent"
      >
      </kendo-chart-series-item-labels>
    </kendo-chart-series-item>
  </kendo-chart-series>
  <kendo-chart-legend
    [labels]="{ content: legendContent }"
  >
  </kendo-chart-legend>
</kendo-chart>

public labelContent(e: SeriesLabelsContentArgs): string {
  return e.category + " [" + e.value + "]";
}

public legendContent(e: LegendLabelsContentArgs): string {
  return e.text + " [" + e.value + "]";
}

In this StackBlitz example, I have shown item value after the text in both Series label and Legend label of the Kendo UI Donut Chart.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik