Quick Start Guide > Tutorials (Xamarin.iOS) > Tutorial 05 - Working with Tooltips and Legends
Tutorial 05 - Working with Tooltips and Legends

Adding Tooltips & Legends to a Chart

So far in the tutorial series, we have created a new chart, added an XAxis, YAxis, some series and some zooming and panning. In this tutorial we are going to add Tooltips and a Legend to the chart.

Source code for this tutorial can be found at our Xamarin Examples Github Repository under Tutorials.iOS

We're going to extend this now to add Legends and Tooltips to the chart. Modify the existing code from Tutorial 04 - Adding Zooming, Panning Behavior as follows.


Update the AddModifiers() method with following code:

Adding Tooltips and Legends to the chart
Copy Code
        void AddModifiers()
        {
            var xAxisDragmodifier = new SCIXAxisDragModifier();
            xAxisDragmodifier.DragMode = SCIAxisDragMode.Pan;
            xAxisDragmodifier.ClipModeX = SCIClipMode.None;
            var yAxisDragmodifier = new SCIYAxisDragModifier();
            yAxisDragmodifier.DragMode = SCIAxisDragMode.Pan;
            var extendZoomModifier = new SCIZoomExtentsModifier();
            var pinchZoomModifier = new SCIPinchZoomModifier();
            // Adding Rollover and Legend modifiers
            var rolloverModifier = new SCIRolloverModifier();
            var legendCollectionModifier = new SCILegendModifier();
            var groupModifier = new SCIChartModifierCollection();
            groupModifier.Add(xAxisDragmodifier);
            groupModifier.Add(yAxisDragmodifier);
            groupModifier.Add(pinchZoomModifier);
            groupModifier.Add(extendZoomModifier);
            groupModifier.Add(rolloverModifier);
            groupModifier.Add(legendCollectionModifier);
            _surface.ChartModifiers = groupModifier;
        }

The legends require that DataSeries are named. So, we adjust the code from Tutorial 03 - Adding Series to the chart to give series a name:

Naming DataSeries for the Legend
Copy Code
        void CreateDataSeries()
        {
            // Init line data series
            _lineDataSeries = new XyDataSeries<Double, Double>();
            // Naming data series, so its name will be shown in LegendModifier
            _lineDataSeries.SeriesName = "LineSeries";
            for (var i = 0; i < 10; i++)
            {
                _lineDataSeries.Append(i, Math.Sin(i));
            }
            // Init scatter data series
            _scatterDataSeries = new XyDataSeries<Double, Double>();
            // Naming data series, so its name will be shown in LegendModifier
            _scatterDataSeries.SeriesName = "ScatterSeries";
            for (var i = 0; i < 10; i++)
            {
                _scatterDataSeries.Append(i, Math.Sin(i));
            }
        }

Here is the result!

See Also