Add custom tooltip on Kendo-React Donut Chart

1 Answer 344 Views
Charts Tooltip
User
Top achievements
Rank 1
User asked on 19 Oct 2022, 02:35 PM

I have a following data

{
    label: 'A',
    value: 10,
    id: 0
  },
  {
    label: 'B',
    value: 12,
    id: 1
  },
  {
    label: 'C',
    value: 4,
    id: 2
  }

When I set the tooltip visible to 'true' . I get the value on the tooltip but I am looking to display the label instead of value

 <ChartSeriesItem
            type="donut"
            data={data}
            categoryField="label"
            autoFit={true}
            field="value"

tooltip={{

                    visible: true,
                    format: '{0}'

          >

Is there a way to customize the format to display the label name?

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 21 Oct 2022, 01:48 PM

Hi,

You can customize the content of the tooltip by returning the desired result in its `render` prop:

For example, you can have a similar implementation:

https://stackblitz.com/edit/react-gprwvq?file=app%2Fmain.jsx

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Charts Tooltip
Asked by
User
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or