Show ToolTip on Series data on mouseover , in System.Web.UI.DataVisualization.Charting

Question

I am working with System.Web.UI.DataVisualization.Charting to create some line charts. I want to show tooltips(x and y value of the datapoint) when mouse over on a data point of a series. As shown in the chart image, i want a tooltip when mouse is hovered on the red circle. chart image

I added series.ToolTip method but , its not working. here is my createSeries meothod

   private System.Web.UI.DataVisualization.Charting.Series CreateSeries(List<X> xAxisData, List<Y> yAxisdata)
    {
        // Chart Series
        System.Web.UI.DataVisualization.Charting.Series _series =
            new System.Web.UI.DataVisualization.Charting.Series(this.SeriesNameList[this.seriesCount]);
        _series.ChartType = this.ChartType;

        // Bind the data
        _series.Points.DataBindXY(xAxisData, yAxisdata);

        // Set Default Properties
        _series.Font = this.GetFontForSeries();
        _series.LabelForeColor = this.GetLabelColor();

        // Add Transparent Marker to increase mouse area for ToolTip
        _series.MarkerStyle = System.Web.UI.DataVisualization.Charting.MarkerStyle.Circle;
        _series.MarkerSize = 7;
        _series.ToolTip = "hello";

        //// Smart Labels
        _series.SmartLabelStyle.Enabled = true;
        _series.SmartLabelStyle.MinMovingDistance = 5;
        _series.SmartLabelStyle.MaxMovingDistance = 50;
        _series.SmartLabelStyle.MovingDirection =
            System.Web.UI.DataVisualization.Charting.LabelAlignmentStyles.Top |
            System.Web.UI.DataVisualization.Charting.LabelAlignmentStyles.TopLeft |
            System.Web.UI.DataVisualization.Charting.LabelAlignmentStyles.TopRight |
            System.Web.UI.DataVisualization.Charting.LabelAlignmentStyles.Bottom |
            System.Web.UI.DataVisualization.Charting.LabelAlignmentStyles.BottomLeft |
            System.Web.UI.DataVisualization.Charting.LabelAlignmentStyles.BottomRight |
            System.Web.UI.DataVisualization.Charting.LabelAlignmentStyles.Left |
            System.Web.UI.DataVisualization.Charting.LabelAlignmentStyles.Right |
            System.Web.UI.DataVisualization.Charting.LabelAlignmentStyles.Center;
        _series.SmartLabelStyle.IsOverlappedHidden = true;
        _series.SmartLabelStyle.AllowOutsidePlotArea = System.Web.UI.DataVisualization.Charting.LabelOutsidePlotAreaStyle.Yes;

        this.seriesCount++;
        return _series;
    }
 private void InitializeChart()
    {
        this.Chart.IsMapEnabled = false;

        this.Chart.RenderType = System.Web.UI.DataVisualization.Charting.RenderType.ImageTag;
        this.Chart.ImageType = System.Web.UI.DataVisualization.Charting.ChartImageType.Png;
        this.Chart.AntiAliasing = System.Web.UI.DataVisualization.Charting.AntiAliasingStyles.Graphics;
        this.Chart.TextAntiAliasingQuality = System.Web.UI.DataVisualization.Charting.TextAntiAliasingQuality.High;
        this.CreateTitle();
        this.CreateLegends();
    }

Can someone help me ? I searched through some of the questios but couldn't find a solution.

JHubbard80 JHubbard80 · Accepted Answer · 2015-01-19T19:30:38

You need to add the tooltip to the points.

Points.DataBindXY does not have a way of binding extended chart properties like tooltips. (Points.DataBind appears to, btw) Source: http://blogs.msdn.com/b/alexgor/archive/2009/02/21/data-binding-ms-chart-control.aspx

So a workaround is to loop through your series points and add the tooltip manually to the points. You can do so using / modifying the code below. (#VALX and #VAL is one way of adding the XY coordinate without directly reading the value, another way would be to read the XY values directly)

// Bind the data
_series.Points.DataBindXY(xAxisData, yAxisdata);

// Set Tooltips
foreach(var point in _series.Points)
{
    point.ToolTip = "(#VALX, #VAL)"; 
}

// Set Default Properties
_series.Font = this.GetFontForSeries();
_series.LabelForeColor = this.GetLabelColor();

Alternate way not using keywords:

// Bind the data
_series.Points.DataBindXY(xAxisData, yAxisdata);

// Set Tooltips
foreach(var point in _series.Points)
{
    point.ToolTip = "(" + point.X + ", " + point.YValues[0] + ")"; 
}

// Set Default Properties
_series.Font = this.GetFontForSeries();
_series.LabelForeColor = this.GetLabelColor();

Show ToolTip on Series data on mouseover , in System.Web.UI.DataVisualization.Charting

1 Answers