Displaying Tooltips in C1Chart

Tooltips are a very effective and straight forward way to extend the charts and add more information to them, without overloading the user. When you hover over the points in the data series on the chart area at runtime, the tooltips appear for each point. Tooltip However the instance for which they get displayed, is small. In this blog, we would be discussing how to display the tooltips in C1Chart until the user moves the mouse away. The implementation approach consists of the following simple steps:

Use C1SuperTooltip for the purpose

C1SuperTooltip makes it easy to create customized Tooltips. Therefore, it is recommended to use C1SuperTooltip in the implementation.

Show Tooltips in the MouseMove event of C1Chart

In order to display the Tooltips until the user moves the mouse, you can use the Show method of C1SuperTooltip in the MouseMove event of C1Chart. This method shows the tooltip with the specified text, for the specified control, at the specified position, for a specified amount of time.


void c1Chart1_MouseMove(object sender, MouseEventArgs e)  
        {  
            Point mp = e.Location;  
            double x =0, y = 0;  
            chart.ChartGroups[0].CoordToDataCoord(mp.X, mp.Y, ref x, ref y);  
            ChartDataSeries ds = chart.ChartGroups[0].ChartData.SeriesList[0];  
            int di = XValueToIndex(ds, x);  
            c1SuperTooltip1.Show(chart.ChartGroups[0].ChartData.SeriesList[0].PointData[di].ToString(), chart, e.Location);  
        }  

int XValueToIndex(ChartDataSeries ds, double xval)  
        {  
            double[] dates = (double[])ds.X.CopyDataOut(typeof(double[]));  
            if (dates == null)  
                return 0;  
            int len = dates.Length;  
            double x1 = dates[0];  
            double x2 = dates[len - 1];  
            double index = (len - 1) * (xval - x1) / (x2 - x1);  
            if (index < 0)                 index = 0;             else if (index > len - 1)  
                index = len - 1;  
            return (int)Math.Round(index);  
        }  

Hide Tooltips in the MouseLeave event of C1Chart

Since the requirement is to display the Tooltips until the mouse is moved, use the Hide method of C1SuperTooltip to hide the tooltips in the MouseLeave event of the chart.


void chart_MouseLeave(object sender, EventArgs e)  
        {  
            c1SuperTooltip1.Hide();  
        }  

And, it's done :) C1SuperTooltip can also be used for such endless customizations in other controls of the suite. Download C# Sample Download VB Sample

GrapeCity

GrapeCity Developer Tools
comments powered by Disqus