How to display more data in the tooltip of Xamarin.Android Charts?
The Xamarin.Android Chart provides the support to display the needed information from its model of populated items source along with the Tooltip UI customization with the help of tooltip view in chart ChartTooltipBehavior as shown in the following code example.
Here, display both date and its corresponding value details in the tooltip. By default, it displays the corresponding y-axis value of that segment.
[CustomTooltipBehavior]
public class CustomTooltipBehavior : ChartTooltipBehavior
{
Context context;
public CustomTooltipBehavior(Context context)
{
this.context = context;
}
protected override View GetView(TooltipView p0)
{
TextView xLabel = new TextView(context)
{
Text = "XValue : " + (p0.ChartDataPoint as Model).Date.ToString("MMM")
};
xLabel.SetTextColor(Android.Graphics.Color.White);
TextView yLabel = new TextView(context)
{
Text = "YValue : " + (p0.ChartDataPoint as Model).Value.ToString()
};
yLabel.SetTextColor(Android.Graphics.Color.White);
LinearLayout.LayoutParams linearlayoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent,
LinearLayout.LayoutParams.MatchParent);
LinearLayout layout = new LinearLayout(context)
{
Orientation = Orientation.Vertical,
LayoutParameters = linearlayoutParams
};
linearlayoutParams.SetMargins(10, 10, 10, 10);
layout.AddView(xLabel);
layout.AddView(yLabel);
p0.AddView(layout);
return p0;
}
}
UI contains scatter series along with the extended tooltip behavior and its color. Also, margin customization is applied in TooltipCreated event of Xamarin.Android Chart control.
LinearLayout linearLayout = new LinearLayout(this)
{
LayoutParameters = new ViewGroup.LayoutParams(LayoutParams.FillParent, LayoutParams.MatchParent)
};
SfChart chart = new SfChart(this)
{
PrimaryAxis = new DateTimeAxis()
{
ShowMajorGridLines = false,
ShowMinorGridLines = false,
EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift
},
SecondaryAxis = new NumericalAxis()
{
ShowMinorGridLines = false,
ShowMajorGridLines = false,
EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift
}
};
chart.Series.Add(new ScatterSeries()
{
ScatterWidth = 30,
ScatterHeight = 30,
ShapeType = ChartScatterShapeType.Ellipse,
ItemsSource = new ViewModel().Data,
XBindingPath = "Date",
YBindingPath = "Value",
Color = Android.Graphics.Color.Rgb(24, 78, 217),
//to enable the tooltip
TooltipEnabled = true
});
chart.PrimaryAxis.LabelStyle.LabelFormat = "MMM";
tooltipBehavior = new CustomTooltipBehavior(this)
{
BackgroundColor = Android.Graphics.Color.Black
};
chart.Behaviors.Add(tooltipBehavior);
chart.TooltipCreated += Chart_TooltipCreated;
linearLayout.AddView(chart);
SetContentView(linearLayout);
private void Chart_TooltipCreated(object sender, SfChart.TooltipCreatedEventArgs e)
{
tooltipBehavior.MarginLeft = 5;
tooltipBehavior.MarginTop = 25;
tooltipBehavior.MarginRight = 80;
tooltipBehavior.MarginBottom = 20;
tooltipBehavior.BackgroundColor = Android.Graphics.Color.Black;
tooltipBehavior.TextColor = Android.Graphics.Color.Transparent;
tooltipBehavior.StrokeWidth = 1f;
}
Output
See also
How
to enable the Xamarin.Android Chart tooltip
How
to programmatically show the Xamarin.Android Chart tooltip
How
to notify the event when dismiss the tooltip in Xamarin.Android Chart
Conclusion
I hope you enjoyed learning about how to display more data in the tooltip of Xamarin.Android Charts.
You can refer to our Xamarin.Android feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin.Android example to understand how to create and manipulate data.
For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-trac, or feedback portal. We are always happy to assist you!
