How to navigate to a hyperlink when clicked on chart axis label (SfCartesianChart) ?
In this article, we described how to navigate to a hyperlink when clicked on the chart axis labels in cartesian chart.
In Flutter Cartesian Chart widget, you can navigate to a hyperlink by clicking on the axis labels using the available callback event. A callback event is a callback function or method that you can pass as an argument to another function or method. It can perform an action whenever you require it. The callback event is used to navigate to a hyperlink when clicked on an axis label is the onAxisLabelTapped event, in which you can check the values and the content of the axis labels and launch the necessary hyperlinks accordingly.
The following steps explains how to navigate to a hyperlink when clicked on the axis labels in cartesian chart.
Step 1: Import the url_launcher library in the Flutter application.
///URL launcher import import 'package:url_launcher/url_launcher.dart';
Step 2: Initialize a SfCartesianChart with the required properties.
SfCartesianChart( primaryXAxis: CategoryAxis( name: 'primaryXAxis', labelIntersectAction: AxisLabelIntersectAction.rotate45, majorGridLines: MajorGridLines(width: 0)), primaryYAxis: NumericAxis( minimum: 500, maximum: 900, interval: 100, axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), series: <ColumnSeries<ChartSampleData, String>>[ ColumnSeries<ChartSampleData, String>( dataSource: [ ChartSampleData(x: 'Goldin\nFinance 117', y: 597), ChartSampleData(x: 'Ping An\nFinance Center', y: 599), ChartSampleData(x: 'Shanghai\nTower', y: 632), ChartSampleData(x: 'Burj\nKhalifa', y: 828) ], xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.y, ) ] )
Step 3: Define the onAxisLabelTapped event in the SfCartesianChart in which you can check the tapped axis label’s argument values. Here, we have checked the axis label’s point index value and launched the necessary hyperlinks for the axis labels using the url_launcher library’s launch() method accordingly.
SfCartesianChart(
onAxisLabelTapped: (args) {
if (args.axisName == 'primaryXAxis') {
if (args.value == 0) {
launch(
'https://www.emporis.com/buildings/388229/goldin-finance-117-tianjin-china');
} else if (args.value == 1) {
launch(
'https://www.emporis.com/buildings/1189351/ping-an-international-finance-center-shenzhen-china');
} else if (args.value == 2) {
launch(
'https://www.emporis.com/buildings/323473/shanghai-tower-shanghai-china');
} else if (args.value == 3) {
launch(
'https://www.emporis.com/buildings/182168/burj-khalifa-dubai-united-arab-emirates');
}
}
},
)
Thus, when clicked on an axis label, the corresponding hyperlink is launched in the browser application.
