Xceed Chart for WinForms v4.4 Documentation
Tooltips

Welcome to Xceed Chart for WinForms v4.4 > User Guide > Interactivity > Drag Operations > Tooltips

Tooltips are displayed by adding a TooltipInteractivityOperation object to InteractivityOperationsCollection:

VB.NET  
chartControl.InteractivityOperations.Add(New TooltipInteractivityOperation())
C#  
chartControl.InteractivityOperations.Add(new TooltipInteractivityOperation());

You must also tell the chart which tooltips you want to display. This is done by properly modifying the Interactivity and SeriesInteractivity objects assigned to almost all chart elements. The following code creates a bar chart and assigns tooltips to all chart elements:

VB.NET  

' Instruct the control to display tooltips

chartControl1.InteractivityOperations.Add(New TooltipInteractivityOperation())

Dim chart As Chart =   chartControl1.Charts(0)

 

' Create a bar series

Dim bar As BarSeries = CType(chart.Series.Add(SeriesType.Bar), BarSeries)

bar.BarStyle = BarStyle.CutEdgeBar

bar.Legend.Mode = SeriesLegendMode.DataPoints

bar.Values.Add(20.0)

bar.Values.Add(60.0)

bar.Values.Add(50.0)

bar.Values.Add(80.0)

bar.Values.Add(60.0)

bar.Appearance.FillMode = AppearanceFillMode.DataPoints

bar.Interactivity.TooltipMode = SeriesTooltipMode.DataPoints

bar.Interactivity.Tooltips.Add("Data item 0")

bar.Interactivity.Tooltips.Add("Data item 1")

bar.Interactivity.Tooltips.Add("Data item 2")

bar.Interactivity.Tooltips.Add("Data item 3")

bar.Interactivity.Tooltips.Add("Data item 4")

 

' set some fill effects in the collection.

Dim fillEffect As FillEffect =  New FillEffect(Color.Red)

bar.Appearance.FillEffects.Add(fillEffect)

fillEffect = New FillEffect()

fillEffect.SetGradient(GradientStyle.DiagonalUp, GradientVariant.Variant2,

Color.BlueViolet, Color.Honeydew)

bar.Appearance.FillEffects.Add(fillEffect)

fillEffect = New FillEffect()

fillEffect.SetPattern(HatchStyle.Divot, Color.DarkOrchid, Color.Aqua)

bar.Appearance.FillEffects.Add(fillEffect)

fillEffect = New FillEffect()

fillEffect.SetPredefinedAdvancedGradient(AdvancedGradientScheme.CalmWater1, 4)

bar.Appearance.FillEffects.Add(fillEffect)

fillEffect = New FillEffect()

fillEffect.SetSolidColor(Color.BlanchedAlmond)

bar.Appearance.FillEffects.Add(fillEffect)

 

' Add stripes for the left and the bottom axes

Dim s1 As AxisStripe =   chart.Axis(StandardAxis.PrimaryY).Stripes.Add(50,60)

Dim s2 As AxisStripe =   chart.Axis(StandardAxis.PrimaryX).Stripes.Add(2,3)

 

' assign tooltips to all chart elements

' Background

m_Form.chartControl1.Background.Interactivity.Tooltip = "Background"

 

' Back chart wall

chart.Wall(ChartWallType.Back).Interactivity.Tooltip = "Back chart wall"

 

' Left chart wall

chart.Wall(ChartWallType.Left).Interactivity.Tooltip = "Left chart wall"

 

' Floor chart wall

chart.Wall(ChartWallType.Floor).Interactivity.Tooltip = "Floor chart wall"

 

' Primary Y axis

chart.Axis(StandardAxis.PrimaryY).Interactivity.Tooltip = "Primary Y axis"

 

' Primary X axis

chart.Axis(StandardAxis.PrimaryX).Interactivity.Tooltip = "Primary X axis"

 

' Horizontal stripe

(CType(chart.Axis(StandardAxis.PrimaryY).Stripes(0), AxisStripe)).Interactivity.Tooltip = "Horizontal stripe"

 

' Vertical stripe

(CType(chart.Axis(StandardAxis.PrimaryX).Stripes(0), AxisStripe)).Interactivity.Tooltip = "Vertical stripe"

 

' Legend

(CType(m_Form.nChartControl1.Legends(0), Legend)).Interactivity.Tooltip = "Legend"

 

m_Form.chartControl1.Refresh()

C#  

// Instruct the control to display tooltips
chartControl1.InteractivityOperations.Add(new TooltipInteractivityOperation());

Chart chart = (Chart)(chartControl1.Charts[0]);

// Create a bar series
BarSeries bar = (BarSeries)chart.Series.Add(SeriesType.Bar);
bar.BarStyle = BarStyle.CutEdgeBar;
bar.Legend.Mode = SeriesLegendMode.DataPoints;

bar.Values.Add(20.0);
bar.Values.Add(60.0);
bar.Values.Add(50.0);
bar.Values.Add(80.0);
bar.Values.Add(60.0);

bar.Appearance.FillMode = AppearanceFillMode.DataPoints;
bar.Interactivity.TooltipMode = SeriesTooltipMode.DataPoints;

bar.Interactivity.Tooltips.Add("Data item 0");
bar.Interactivity.Tooltips.Add("Data item 1");
bar.Interactivity.Tooltips.Add("Data item 2");
bar.Interactivity.Tooltips.Add("Data item 3");
bar.Interactivity.Tooltips.Add("Data item 4");

// set some fill effects in the collection.
FillEffect fillEffect = new FillEffect(Color.Red);
bar.Appearance.FillEffects.Add(fillEffect);

fillEffect = new FillEffect();
fillEffect.SetGradient(GradientStyle.DiagonalUp, GradientVariant.Variant2, Color.BlueViolet, Color.Honeydew);
bar.Appearance.FillEffects.Add(fillEffect);

fillEffect = new FillEffect();
fillEffect.SetPattern(HatchStyle.Divot, Color.DarkOrchid, Color.Aqua);
bar.Appearance.FillEffects.Add(fillEffect);

 

fillEffect = new FillEffect();
fillEffect.SetPredefinedAdvancedGradient(AdvancedGradientScheme.CalmWater1, 4);
bar.Appearance.FillEffects.Add(fillEffect);

fillEffect = new FillEffect();
fillEffect.SetSolidColor(Color.BlanchedAlmond);
bar.Appearance.FillEffects.Add(fillEffect);

// Add stripes for the left and the bottom axes
AxisStripe s1 = chart.Axis(StandardAxis.PrimaryY).Stripes.Add(50, 60);
AxisStripe s2 = chart.Axis(StandardAxis.PrimaryX).Stripes.Add(2, 3);

// assign tooltips to all chart elements
// Background
m_Form.chartControl1.Background.Interactivity.Tooltip = "Background";

// Back chart wall
chart.Wall(ChartWallType.Back).Interactivity.Tooltip = "Back chart wall";

// Left chart wall
chart.Wall(ChartWallType.Left).Interactivity.Tooltip = "Left chart wall";

/// Floor chart wall
chart.Wall(ChartWallType.Floor).Interactivity.Tooltip = "Floor chart wall";

// Primary Y axis
chart.Axis(StandardAxis.PrimaryY).Interactivity.Tooltip = "Primary Y axis";

// Primary X axis
chart.Axis(StandardAxis.PrimaryX).Interactivity.Tooltip = "Primary X axis";

// Horizontal stripe
((AxisStripe)(chart.Axis(StandardAxis.PrimaryY).Stripes[0])).Interactivity.Tooltip = "Horizontal stripe";

// Vertical stripe
((AxisStripe)(chart.Axis(StandardAxis.PrimaryX).Stripes[0])).Interactivity.Tooltip = "Vertical stripe";

// Legend
((Legend)(m_Form.chartControl1.Legends[0])).Interactivity.Tooltip = "Legend";

m_Form.chartControl1.Refresh();

It is obvious in this code that the tooltips displayed by all chart elements except the data items in the series are controlled by the Interactivity object attached to them. This provides a very consistent way for working with all interactivity features, and tooltips in particular. 

To add tooltips to data items, you need to use a slightly different programming technique. This is because it is not realistic to attach an Interactivity object to each data item, as this will increase the memory usage of the component, especially when you have many data points. Instead, each series has an attached SeriesInteractivity object, which exposes collections for the same properties as the Interactivity object. For example, the Tooltip property becomes a Tooltips collection. The SeriesInteractivity object also exposes several properties that define how to map the entries in the collections to the different data items. For example, in DataPoints mode the control assigns tooltips to the data items by cycling over the Tooltips collection. This model is much more flexible than assigning an Interactivity object for each data item. For example, let's say that you have to use the same tooltip for all data items. In this case all you have to do is to add the tooltip to the Tooltips collection and set the TooltipMode to SeriesTooltipMode.DataPoints:

VB.NET  

bar.Interactivity.TooltipMode = SeriesTooltipMode.DataPoints

bar.Interactivity.Tooltips.Add("This tooltip is common for all data items")

C#  
bar.Interactivity.TooltipMode = SeriesTooltipMode.DataPoints;
bar.Interactivity.Tooltips.Add("This tooltip is common for all data items");

Note that we can also modify some properties of the TooltipInteractivityOperation, such as AutoPopDelay and InitialDelay, which control the delays for showing and hiding tooltips.

Related Examples

Windows Forms: Interactivity\Tooltips and Cursors 

Web forms: Getting started\HTML image map, Getting started\HTML image map postback

See Also

ChartControl | SeriesInteractivity | Interactivity | HTML Image Map | HTML Image Map with Postback