[Solved] Putting Title:Value in the tooltip or label

[Christopher Ronak]

Hi There, 

Is there a way to set the tooltip to show both the name and the value in a Pie chart tooltip and/or label?
So, taking your demo example, the tooltip would show, "Hydro: 22%" instead of just "22%".
The problem with how it is now, it's tricky to correlate the number in the pie chart with the colour in the legend.

Thanks!

Chris

[Daniel]

Hello Christopher,

There are several items you can access in the ToolTip and Labels template. The one that can help you add the name is "category". So if you change the template to look like in the snippet below 

.Template("<#= category #> - <#= value #>% ")

you will get both the name and the value displayed.

For the full list of items which are accessible in the template you can follow this Link to the documentation.

Kind regards,
Daniel
the Telerik team

[Rafael]

I rebind my chart through the ajax request and try to display SValueName instead of  Svalue, but can do that.

var chart = $("#SatisfactionChart").data("tChart");
chart.rebind({ EmployeeId: EmployeeId, Year: satisfYear });

    <%  Html.Telerik().Chart(Model)
        .Name("SatisfactionChart").Theme("black")
        .Legend(legend => legend.Position(ChartLegendPosition.Bottom).Visible(true))
        .Series(series =>
        {
            series.Line(s => s.SValue).MissingValues(ChartLineMissingValues.Gap).Name("Month").Labels(l => l.Template("<#= dataItem.SValueName #>"));
        })
        .CategoryAxis(axis => axis.Categories(s => s.Month))
        .DataBinding(dataBinding => dataBinding.Ajax().Select("GetLinesForChart", "Satisfaction"))
        .Tooltip(tooltip => tooltip.Visible(true).Format("{0:#,##0}"))
        .HtmlAttributes(new { style = "width: 500px; height: 2500px;" })
        .Render();
    %>

Could you prompt what's wrong ?

[Daniel]

Hello Rafael,

You should modify the template in the chart client-side series options in order to change it when rebinding the Chart e.g.

var chart = $("#SatisfactionChart").data("tChart");
chart.options.series[0].labels.template = NewTemplate;
chart.rebind({ EmployeeId: EmployeeId, Year: satisfYear });

Greetings,
Daniel
the Telerik team

[Rafael]

thanks so much: it works
chart.options.series[0].labels.template = "<#= dataItem.SValueNameEmployee #>";

[Priyanka]

Thanks for the post it works for me