[Solved] How to add Legends & Tooltip to a Chart

[Nikola]

How is it possible to add a "custom" legend from code behind is it even possible to create a legend with my code  ? or should i do something else ? 

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            HolidayTrackerEntities ctx = HtEntityFactory.Context;

            IEnumerable<HtUser> users = ctx.HtUsers;

            int year = 2013;

            double usedVacation = 0;
            double bookedVacation = 0;

            foreach (HtUser user in users)
            {
                usedVacation += user.GetUsedVacation(year);
                bookedVacation += user.GetBookedVacation(year);
            }
            double forcastVacation = usedVacation + bookedVacation;

            List<double> src = new List<double>();
            src.Add(usedVacation);
            src.Add(bookedVacation);
            src.Add(forcastVacation);

            VacationPieChart.DataSource = src;
            VacationPieChart.DataBind();
        }
    }

Thanks for help and fast answer !! 

[Danail Vasilev]

Hi Nikola,

Thank you for contacting us.

By default the legend of the HtmlChart is visible, so make sure that you:

• Have not explicitly set its visible property to false (HtmlChart-> Legend-> Appearance-> Visible).
• Have set a name for each SeriesItem of the PieSeries, so that the Legend can be populated with these strings.

For a databound chart (which is your case) you can create an additional field in your datasource that will be used for the Names of the Series which in turn will be shown as a legend. Then you can set the NameField property (HtmlChart-> PlotArea-> Series-> PieSeries-> NameField) of the PieSeries element with this field.

In your example, however, you are using a list of double numbers, so that you cannot feed NameField property of the HtmlChart. I can suggest you try using a list of custom objects and this online demo is a good example to start with.

If you want, however, to create a custom legend, apart from the one that HtmlChart offers, you can simply hide the legend of you current chart and create a custom one in a styled div after/next to the chart. You can follow the approach that Kendo UI are applying in their Bubble chart example here.

Regarding the tooltips they are visible by default, unless you have set their visible property to false. Tooltips show by defaut the string formatted around the value of the hovered PieSeries Item. If your HtmlChart, however, is databound to a datasource, additional columns from the datasource can be displayed as the content. This can be done through ClientTemplates and you can find examples on how to do that in this online demo and this help article.

If you have any other questions or feedback related to our products, do not hesitate to contact us again.

Kind regards,
Danail Vasilev
the Telerik team