Telerik Forums / UI for WinForms Forum / ChartView /

Custom Tooltips

Telerik UI for WinForms
Resources Buy Try

21 posts, 0 answers

Josh

65 posts

Member since:
Dec 2009

Posted 02 Aug 2012 Link to this post

I am using the new ChartView (scatter data series) and I would like to know if there is a way to use custom tooltips on the data points instead of the regular XValue and YValue.
Thanks
Ivan Petrov
Admin

717 posts

Posted 06 Aug 2012 Link to this post

Hello Josh,

Thank you for writing.

Currently, RadChartView does not offer support for tooltips. We have tooltip support in our plans and we would appreciate any feedback on what feature you would like to see in it.

If you are referring to the trackball controller, in its current version it cannot be modified, but we are working on it and we will introduce a fully customizable trackball in our next release.

I hope this will be informative. Do not hesitate to write back with any further questions.

Kind regards,
Ivan Petrov
the Telerik team

RadControls for WinForms Q2'12 release is now live! Check out what's new or download a free trial >>
Josh

65 posts

Member since:
Dec 2009
Posted 08 Aug 2012 Link to this post

Hello Ivan,

I was referring to the tooltips in this tutorial. I was able to get the tooltips showing by adding a ChartToolTipController but they only show XValue and YValue. I wish to change the text that is displayed by adding some extra info from the data record.

chartview-tooltip.png
Ivan Petrov
Admin

717 posts

Posted 13 Aug 2012 Link to this post

Hello Josh,

Thank you for writing back.

The situation with the tooltip support of RadChartView is pretty much the same as with the trackball. We are currently working on a new fully customizable version of the controller, which will allow developers to tailor fit the controller to their needs. As I said in my previous post we would welcome any feedback on features you would like to see in the tooltip controller.

I hope this will be useful. Should you have further questions, I would be glad to help.

Regards,
Ivan Petrov
the Telerik team

RadControls for WinForms Q2'12 release is now live! Check out what's new or download a free trial >>
Michelle

7 posts

Member since:
May 2012

Posted 04 Sep 2012 Link to this post

Hi Ivan,

Are we able to change the tooltip text size in the radchartview?
Stefan
Admin

2911 posts

Posted 06 Sep 2012 Link to this post

Hello Michelle,

Currently, this is not possible. I will add a feature request for this in PITS so you can track its progress. Feel free to vote for it here: http://www.telerik.com/support/pits.aspx#/public/winforms/12576.

Regards,
Stefan
the Telerik team

RadControls for WinForms Q2'12 release is now live! Check out what's new or download a free trial >>
Robert Schoen

17 posts

Member since:
Sep 2008

Posted 17 Mar 2014 Link to this post

Has there been any progress with tooltips in Charts? The last update I see for this was in 2012. I am needing to customize the tool tip when my customer hovers over a bar section or area.
Dess | Tech Support Engineer, Sr.
Admin

3989 posts
Posted 20 Mar 2014 Link to this post

Hello Robert ,

Thank you for contacting Telerik Support.

We introduced the referred feature in Q2 2013 (version 2013.2.612). Here is a sample code snippet, demonstrating how to customize the standard ToolTip:

public Form1()

{

    InitializeComponent();

    radChartView1.AreaType = ChartAreaType.Cartesian;

    BarSeries barSeries1 = new BarSeries();

    barSeries1.DataPoints.Add(new CategoricalDataPoint(10, "1"));

    barSeries1.DataPoints.Add(new CategoricalDataPoint(4, "2"));

    barSeries1.DataPoints.Add(new CategoricalDataPoint(23, "3"));

    barSeries1.DataPoints.Add(new CategoricalDataPoint(11, "4"));

    barSeries1.DataPoints.Add(new CategoricalDataPoint(15, "5"));

    barSeries1.DataPoints.Add(new CategoricalDataPoint(10, "6"));

    barSeries1.DataPoints.Add(new CategoricalDataPoint(4, "7"));

    barSeries1.DataPoints.Add(new CategoricalDataPoint(7, "8"));

    barSeries1.DataPoints.Add(new CategoricalDataPoint(11, "9"));

    barSeries1.DataPoints.Add(new CategoricalDataPoint(15, "10"));

    radChartView1.Series.Add(barSeries1);

    BarSeries barSeries2 = new BarSeries();

    barSeries2.DataPoints.Add(new CategoricalDataPoint(6, "1"));

    barSeries2.DataPoints.Add(new CategoricalDataPoint(20, "2"));

    barSeries2.DataPoints.Add(new CategoricalDataPoint(7, "3"));

    barSeries2.DataPoints.Add(new CategoricalDataPoint(8, "4"));

    barSeries2.DataPoints.Add(new CategoricalDataPoint(4, "5"));

    barSeries2.DataPoints.Add(new CategoricalDataPoint(10, "6"));

    barSeries2.DataPoints.Add(new CategoricalDataPoint(24, "7"));

    barSeries2.DataPoints.Add(new CategoricalDataPoint(17, "8"));

    barSeries2.DataPoints.Add(new CategoricalDataPoint(18, "9"));

    barSeries2.DataPoints.Add(new CategoricalDataPoint(43, "10"));

    radChartView1.Series.Add(barSeries2);

    ChartTooltipController toolTipController = new ChartTooltipController();

    toolTipController.DataPointTooltipTextNeeded += toolTipController_DataPointTooltipTextNeeded;

    radChartView1.Controllers.Add(toolTipController);

}

private void toolTipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)

{

    e.Tooltip.BackColor = Color.Yellow;

    e.Tooltip.ForeColor = Color.Red;



    e.Tooltip.OwnerDraw = true;

    e.Tooltip.Draw += ToolTip_Draw;

}

private void ToolTip_Draw(object sender, DrawToolTipEventArgs e)

{

    ToolTip toolTip = sender as ToolTip;



    e.Graphics.FillRectangle(new SolidBrush(toolTip.BackColor), e.Bounds);

    e.DrawBorder();

    e.DrawText(TextFormatFlags.Left );

}

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

Tooltip.png
John

28 posts

Member since:
Sep 2013

Posted 28 Apr 2014 Link to this post

Hi,
I'm using custom tooltips on a scatterlineseries/ScatterDatapoints chartview by adding a new ChartTooltipController and handling the DataPointTooltipTextneeded event - as outlined in the previous response. The tooltip includes the series name and the x,y coordinates. However when I hover near a point it often displays the tooltip for the wrong point (which I can tell from the x,y coordinate). How can I assure I'm getting the tooltip for the closest datapoint? The x coordinates have large spacial separation and often it displays tooltips for points nowhere near the mouse position.

One other tooltip question - I was not able to display tooltips for Categoricaldatapoints. Do tooltips work for for this type?

Thanks,

John
Dess | Tech Support Engineer, Sr.
Admin

3989 posts

Posted 01 May 2014 Link to this post

Hello John,

Thank you for writing.

I confirm that incorrect tooltip is displayed for ScatterDataPoints. I have logged it in our Feedback Portal. You can track its progress, subscribe for status changes and add your vote/comment to it on the following link - Feedback Item.

Currently, the possible workaround that I can suggest is to use custom renderer:

public Form1()

{

    InitializeComponent();

    this.radChartView1.CreateRenderer += radChartView1_CreateRenderer;

}

private void radChartView1_CreateRenderer(object sender, ChartViewCreateRendererEventArgs e)

{

    e.Renderer = new CustomCartesianRenderer(e.Area as CartesianArea);

}

public class CustomCartesianRenderer : CartesianRenderer

{

    public CustomCartesianRenderer(CartesianArea area) : base(area)

    {

    }



    protected override void Initialize()

    {

        base.Initialize();

        for (int i = 0; i < this.DrawParts.Count; i++)

        {

            ScatterSeriesDrawPart scatterPart = this.DrawParts[i] as ScatterSeriesDrawPart;

            if (scatterPart != null)

            {

                this.DrawParts[i] = new CustomScatterSeriesDrawPart((ScatterLineSeries)scatterPart.Element, this);

            }

        }

    }

}

public class CustomScatterSeriesDrawPart : ScatterLineSeriesDrawPart

{

    public CustomScatterSeriesDrawPart(ScatterLineSeries series, IChartRenderer renderer)

        : base(series, renderer)

    {

    }

    public override DataPoint HitTest(Point location)

    {

        for (int i = 0; i < this.Element.DataPoints.Count; i++)

        {

            RadRect slot = this.Element.DataPoints[i].LayoutSlot;

            float pointHalfWidth = this.Element.PointSize.Width / 2;

            float pointHalfHeight = this.Element.PointSize.Height / 2;

            RectangleF scatterBounds = new RectangleF((float)(this.OffsetX + slot.X - pointHalfWidth),

                (float)(this.OffsetY + slot.Y - pointHalfHeight), this.Element.PointSize.Width, this.Element.PointSize.Height);

            if (scatterBounds.Contains(location.X, location.Y))

            {

                return this.Element.DataPoints[i];

            }

        }

        return null;

    }

}

As to the tooltip functionality for CategoricalDataPoints, currently, it is not supported. However, it is a reasonable request and I have logged it in our Feedback Portal as well. You can track its progress, subscribe for status changes and add your vote/comment to it on the following link - Feedback Item.

I have also added 1000 Telerik points for reporting this.

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
John

28 posts

Member since:
Sep 2013
Posted 22 May 2014 in reply to Dess | Tech Support Engineer, Sr. Link to this post

Hi,
Thanks for your response. I am having a problem implementing the code from your previous post. DataPoints does not have a Count property and is not indexible. See attached.

Thanks for your help.
John

CustomRenderer.jpg
Dess | Tech Support Engineer, Sr.
Admin

3989 posts
Posted 26 May 2014 Link to this post

Hello John,

Thank you for writing back.

I have attached my sample project, containing the provided code from my previous post. This solution is suitable for our latest version. Could you please share in which version you experience difficulties in implementing the workaround?

I am looking forward to your reply.

Regards,
Desislava
Telerik

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.

572417-ChartToolTip.zip

ChartToolTips.gif
George

62 posts

Member since:
Sep 2008

Posted 08 Apr 2015 Link to this post

Hi All,

On the issue of presenting custom tooltips, I have used your suggestion to create and use a customtooltip controller, however I have an issue at the event level to determine the XValue of the specific data point, which in my case is a date from CategoricalDataPoint of an DateTimeCategoricalAxis.



private void toolTipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)

{

    CategoricalDataPoint point = e.DataPoint as CategoricalDataPoint;



    e.Text = point.Value //return only Yaxis value!



        //e.Tooltip.BackColor = Color.Yellow;

    //e.Tooltip.ForeColor = Color.Red;

    //e.Tooltip.OwnerDraw = true;

}

I need to get the Date part X value, in addition to the Y value of the point, in order to format a special tooltip text block. Can you please help me on how I can do this?

Regards,

George
Stefan
Admin

2911 posts

Posted 10 Apr 2015 Link to this post

Hello George,

The dataPoint has a Category property from where you can access its category:

e.Text = point.Value.ToString() + " - " + point.Category;

I hope that you find this information useful. Should you have any other questions, do not hesitate to contact us.

Regards,
Stefan
Telerik

See What's Next in App Development. Register for TelerikNEXT.
George

62 posts

Member since:
Sep 2008

Posted 10 Apr 2015 in reply to Stefan Link to this post

Thanks,

... maybe you can also look at this post also I face problems with,

http://www.telerik.com/forums/charts-being-cropped-left-and-right-do-not-display-properly
Dipak

3 posts

Member since:
Feb 2018

Posted 12 Nov 2018 in reply to Josh Link to this post

I am trying to show XValue and YValue with tooltip on mouse hover event. Can you please send me your part of code for my reference?
Dess | Tech Support Engineer, Sr.
Admin

3989 posts

Posted 13 Nov 2018 Link to this post

Hello, Dipak,

You can find below a sample code snippet how to handle the ChartTooltipController.DataPointTooltipTextNeeded event and specify what text to be displaye din the tooltip considering the X and Y values of the ScatterDataPoint for example:

public RadForm1()

{

    InitializeComponent();

    ScatterSeries scatterSeries = new ScatterSeries();

    scatterSeries.Name = "";

    scatterSeries.DataPoints.Add(new ScatterDataPoint(15, 19));

    scatterSeries.DataPoints.Add(new ScatterDataPoint(18, 10));

    scatterSeries.DataPoints.Add(new ScatterDataPoint(13, 15));

    scatterSeries.DataPoints.Add(new ScatterDataPoint(10, 8));

    scatterSeries.DataPoints.Add(new ScatterDataPoint(5, 12));

    scatterSeries.PointSize = new SizeF(8, 8);

    this.radChartView1.Series.Add(scatterSeries);

    ScatterSeries scatterSeries2 = new ScatterSeries();

    scatterSeries2.Name = "";

    scatterSeries2.DataPoints.Add(new ScatterDataPoint(20, 20));

    scatterSeries2.DataPoints.Add(new ScatterDataPoint(15, 10));

    scatterSeries2.DataPoints.Add(new ScatterDataPoint(7, 6));

    scatterSeries2.DataPoints.Add(new ScatterDataPoint(18, 22));

    scatterSeries2.DataPoints.Add(new ScatterDataPoint(10, 10));

    scatterSeries2.PointSize = new SizeF(8, 8);

    scatterSeries.Shape = new RoundRectShape(0);

    this.radChartView1.Series.Add(scatterSeries2);



    ChartTooltipController tooltipController = new ChartTooltipController();

    this.radChartView1.Controllers.Add(tooltipController);

    tooltipController.DataPointTooltipTextNeeded += tooltipController_DataPointTooltipTextNeeded;

}

private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)

{

    ScatterDataPoint dp = e.DataPoint as ScatterDataPoint;

    if (dp != null)

    {

        e.Text = "X: " + dp.XValue + " Y: " + dp.YValue;

    }

}

I hope this information helps. If you need any further assistance please don't hesitate to contact me.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Dipak

3 posts

Member since:
Feb 2018

Posted 13 Nov 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

My apology. I want the solution for line chart. Please suggest how to display tooltip for line chart datapoints. "LineSeries" is the type I am using.
Dess | Tech Support Engineer, Sr.
Admin

3989 posts

Posted 14 Nov 2018 Link to this post

Hello, Dipak,

You may follow a similar approach for the LineSeries as well. It is just necessary to cast the DataPointTooltipTextNeededEventArgs.DataPoint to CategoricalDataPoint. Here is the modified code snippet:

public RadForm1()

{

    InitializeComponent();

    LineSeries lineSeries = new LineSeries();

    lineSeries.PointSize = new SizeF(8, 8);

    lineSeries.DataPoints.Add(new CategoricalDataPoint(20, "Jan"));

    lineSeries.DataPoints.Add(new CategoricalDataPoint(22, "Apr"));

    lineSeries.DataPoints.Add(new CategoricalDataPoint(12, "Jul"));

    lineSeries.DataPoints.Add(new CategoricalDataPoint(19, "Oct"));

    this.radChartView1.Series.Add(lineSeries);

    LineSeries lineSeries2 = new LineSeries();

    lineSeries2.PointSize = new SizeF(8, 8);

    lineSeries2.DataPoints.Add(new CategoricalDataPoint(18, "Jan"));

    lineSeries2.DataPoints.Add(new CategoricalDataPoint(15, "Apr"));

    lineSeries2.DataPoints.Add(new CategoricalDataPoint(17, "Jul"));

    lineSeries2.DataPoints.Add(new CategoricalDataPoint(22, "Oct"));

    this.radChartView1.Series.Add(lineSeries2);



    ChartTooltipController tooltipController = new ChartTooltipController();

    this.radChartView1.Controllers.Add(tooltipController);

     tooltipController.DataPointTooltipTextNeeded += tooltipController_DataPointTooltipTextNeeded;

}

private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)

{

    CategoricalDataPoint dp = e.DataPoint as CategoricalDataPoint;

    if (dp != null)

    {

        e.Text = "V- " + dp.Value + " C- " + dp.Category;

    }

}

I hope this information helps.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Dipak

3 posts

Member since:
Feb 2018

Posted 14 Nov 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

Thanks. It worked.

Continue to above question if I want to show two different tooltips for two series what will be the way?

Consider above chart which has black and red plotting. for red I want to show "Signal: " + "Time: " and for black "Position: " +"Time: ".

Thanks in advance.
Dess | Tech Support Engineer, Sr.
Admin

3989 posts

Posted 15 Nov 2018 Link to this post

Hello, Dipak,

The DataPointTooltipTextNeeded event gives you the freedom to control what text to be displayed. So when you hover a certain DataPoint, the event is fired and you can set the DataPointTooltipTextNeededEventArgs.Text considering the target DataPointTooltipTextNeededEventArgs.DataPoint. You can find to which ChartSeries the target point is associated and format the string respectively. You can find below a sample code snippet how to determine for which series you are showing a tool-tip:

public RadForm1()

{

    InitializeComponent();

    LineSeries lineSeries = new LineSeries();

    lineSeries.Name = "q1";

    lineSeries.PointSize = new SizeF(8, 8);

    lineSeries.DataPoints.Add(new CategoricalDataPoint(20, "Jan"));

    lineSeries.DataPoints.Add(new CategoricalDataPoint(22, "Apr"));

    lineSeries.DataPoints.Add(new CategoricalDataPoint(12, "Jul"));

    lineSeries.DataPoints.Add(new CategoricalDataPoint(19, "Oct"));

    this.radChartView1.Series.Add(lineSeries);

    LineSeries lineSeries2 = new LineSeries();

    lineSeries2.Name = "q2";

    lineSeries2.PointSize = new SizeF(8, 8);

    lineSeries2.DataPoints.Add(new CategoricalDataPoint(18, "Jan"));

    lineSeries2.DataPoints.Add(new CategoricalDataPoint(15, "Apr"));

    lineSeries2.DataPoints.Add(new CategoricalDataPoint(17, "Jul"));

    lineSeries2.DataPoints.Add(new CategoricalDataPoint(22, "Oct"));

    this.radChartView1.Series.Add(lineSeries2);



    ChartTooltipController tooltipController = new ChartTooltipController();

    this.radChartView1.Controllers.Add(tooltipController);

    tooltipController.DataPointTooltipTextNeeded += tooltipController_DataPointTooltipTextNeeded;

}

private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)

{

    CategoricalDataPoint dp = e.DataPoint as CategoricalDataPoint;

    if (dp != null)

    {

        e.Text = "V- " + dp.Value + " C- " + dp.Category;

        foreach (ChartSeries series in this.radChartView1.Series)

        {

            if (series.DataPoints.Contains(dp))

            {

                Console.WriteLine(series.Name);

            }

        }

    }

}

I hope this information helps.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Custom Tooltips

Josh

Ivan Petrov

Josh

Ivan Petrov

Michelle

Stefan

Robert Schoen

Dess | Tech Support Engineer, Sr.

John

Dess | Tech Support Engineer, Sr.

John

Dess | Tech Support Engineer, Sr.

George

Stefan

George

Dipak

Dess | Tech Support Engineer, Sr.

Dipak

Dess | Tech Support Engineer, Sr.

Dipak

Dess | Tech Support Engineer, Sr.