This is a migrated thread and some comments may be shown as answers.
How to add Legends & Tooltip to a Chart
1 Answer 39 Views
This is a migrated thread and some comments may be shown as answers.
Nikola
Top achievements
Rank 2
Nikola asked on 27 Feb 2013, 01:46 PM
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 !! 

1 Answer, 1 is accepted

Sort by
0
Accepted
Danail Vasilev
Telerik team
answered on 28 Feb 2013, 05:46 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Asked by
Nikola
Top achievements
Rank 2
Answers by
Danail Vasilev
Telerik team
Share this question
or