Click here to Skip to main content
13,191,400 members (74,797 online)
Click here to Skip to main content
Add your own
alternative version


5 bookmarked
Posted 25 Sep 2012

Simple Chart with ToolTip using ASP.NET Chart Control

, 25 Sep 2012
Rate this:
Please Sign up or sign in to vote.
This article is to help beginners know how to create a customized tooltip on a bar chart


Tooltips and charts are most commonly used in a number of web applications. Chart controls are of immense help while generating reports. Although there is a default tool tip available in ASP.NET there may be many a cases where tool tips needs to be customized in sink with our website. Combining chart control (here bar chart) with the tool tip provides great visualization of the chart data for the users.

Using the code

First we create a chart (bar) by using the ASP.NET chart control. It can be dragged and dropped from the toolbox under data category. Once it is done we will find the following code is being added to our .aspx page 

<%@ Register Assembly="System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 

    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

The next thing is to write the control code for our chart as follows:

<asp:Chart ID="Chart1" runat="server" Width="500" Height="500">
  <asp:Series Name="Series1" ChartType="Column" >
   <asp:ChartArea Name="ChartArea1">   </asp:ChartArea>

Now that our chart is being created our next step is to create the tooltip:

<div id="myToolTip" style="position: absolute; visibility: hidden; width:200px; height:100px; margin: 18px 0;
            padding: 18px 20px;
            background-color: white; /* easy rounded corners for modern browsers */
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            border: 1px solid #c5d9e8;
            padding: 17px 19px;">
<div style="position:absolute;float:left;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/exclamation-mark.jpg" />
<div style="position:absolute;left:70px;top:30px;">
 <b><asp:Label ID="lbl" runat="server"></asp:Label></b>
<div style="position:absolute;top:60px;">
<asp:LinkButton ID="PDlink" runat="server" 

       OnClick="PDlink_Click">Click here</asp:LinkButton>

Here I have customized the tool tip according to my style. You can change the CSS suitable to your preferred style.

The next steps is to write the JavaScript so that our tooltip works:

<script type="text/javascript">
    function showTooltip(value1, value2,ex) {
        var tooltip = document.getElementById("myToolTip"); = "visible";
        var posx = 0;
        var posy = 0;
        if (!e) var e = (window.event) ? event : ex;
        if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
   = posx + "px";
   = (posy-100)+ "px";
        else if (e.clientX || e.clientY) {
            if (e.cancelBubble != null) e.cancelBubble = true;
            //for IE8 and earlier versions event bubbling occurs...
            posx = e.clientX + document.body.scrollLeft
                   + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
   = posx + "px";
   = (posy-100)+ "px";
        document.getElementById("<%=lbl.ClientID%>").innerHTML = 
          "X and Y Values : " +"("+value1+","+value2+")"; 
      function hide() {
           var tooltip = document.getElementById("myToolTip");
  = "hidden";

The above code works properly for all the browsers. Now that we are done with .aspx page let look around our code behind .... 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization;
using System.Web.UI.DataVisualization.Charting;
using System.Drawing;
using ChartToolTip.DataAccess;
using System.Data;
namespace ChartToolTip
    public partial class _Default : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)
            #region using Database
            /*  FetchUserTimeDetails _obj = new FetchUserTimeDetails();
            DataTable Table=_obj.FetchUserTimeDetailsFromDB();
            Chart1.ChartAreas[0].AxisX.Title = "Username";
            Chart1.ChartAreas[0].AxisY.Title = "Hours Logged";
            Chart1.Series["Series1"].ChartType = SeriesChartType.Column;
            for(int i=0;i<Table.Rows.Count;i++)
            #region without using DataBase
            Chart1.ChartAreas[0].AxisX.Title = "X Axis";
            Chart1.ChartAreas[0].AxisY.Title = "Y Axis";
            List<int> list = new List<int>();
            foreach (int value in list)
            Chart1.Series["Series1"].Points[0].Color = Color.Red;
            Chart1.Series["Series1"].Points[0].IsValueShownAsLabel = true;
            Chart1.Series["Series1"].Points[1].Color = Color.RoyalBlue;
            Chart1.Series["Series1"].Points[1].IsValueShownAsLabel = true;
            Chart1.Series["Series1"].Points[2].Color = Color.Yellow;
            Chart1.Series["Series1"].Points[2].IsValueShownAsLabel = true;
            Chart1.Series["Series1"].Points[3].Color = Color.RosyBrown;
            Chart1.Series["Series1"].Points[3].IsValueShownAsLabel = true;
            Chart1.Series["Series1"].Points[4].Color = Color.Green;
            Chart1.Series["Series1"].Points[4].IsValueShownAsLabel = true;
            Chart1.Series["Series1"].Points[0].MapAreaAttributes = 
            Chart1.Series["Series1"].Points[1].MapAreaAttributes = 
            Chart1.Series["Series1"].Points[2].MapAreaAttributes = 
            Chart1.Series["Series1"].Points[3].MapAreaAttributes = 
            Chart1.Series["Series1"].Points[4].MapAreaAttributes = 
            Chart1.Attributes.Add("onmouseover","return hide()");
        protected void PDlink_Click(object sender, EventArgs e)

Don't forget to include all the namespaces as above. I have used onmouseover event on the points of the chart dynamically created for displaying the tool tip div and onmouseover event on the chart itself to hide the tool tip div. The tool tip thus created will have the x axis, y axis values of the chart displayed in it along with a link which redirects to another page (can be used for showing details of particular data). 

Points of Interest 

The onmouseover and onmouseout events are usually used for displaying and hiding something (here the tool tip div).... but only one among both the events are being fired by the map area attributes that I have used.. so we can either hide the div or display it.. so i thought of replacing the onmouseout of the point with onmouseover of the chart Smile ...... Just try this stuff.....Its pretty interesting for beginners I suppose.... Cheers Smile....


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Junior) Aspire Systems
India India
Just Started Software development( kind of a kiddo for most software giants here)... Exploring a lot in .NET technology..Want to be a future geek.. so here Smile | :)

You may also be interested in...


Comments and Discussions

QuestionAdding $ symbol for pie chart series value Pin
bhuvana.k10-May-13 0:27
memberbhuvana.k10-May-13 0:27 
AnswerRe: Adding $ symbol for pie chart series value Pin
K C R10-May-13 5:12
memberK C R10-May-13 5:12 
QuestionNeed clarification.... Pin
Rashmi0920-Jan-13 17:40
groupRashmi0920-Jan-13 17:40 
AnswerRe: Need clarification.... Pin
K C R12-May-13 4:18
memberK C R12-May-13 4:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171017.1 | Last Updated 25 Sep 2012
Article Copyright 2012 by K C R
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid