Cartesian chart methods
Methods in tooltipBehavior
Show method in tooltipBehavior
The show method is used to activate the tooltip at the specified location.
SfCartesianChart chart;
TooltipBehavior tooltip;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
// Add the required data
];
tooltip = TooltipBehavior (enable: true);
chart = SfCartesianChart(
tooltipBehavior: tooltip,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Show'),
onPressed: show
),
Container(child: chart)
]
)
)
);
}
void show() {
tooltip.show(121,164);
}
void hide(){
tooltip.hide();
}showByIndex method in tooltipBehavior
The showByIndex method is used to Displays the tooltip at the specified series and point index.
The below mentioned arguments are given to the showByIndex method:
seriesIndex - index of the series for which the pointIndex is specified.
pointIndex - index of the point for which the tooltip should be shown.
SfCartesianChart chart;
TooltipBehavior tooltip;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
// Add the required data
];
tooltip = TooltipBehavior (enable: true);
chart = SfCartesianChart(
tooltipBehavior: tooltip,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Show'),
onPressed:(){
tooltip.showByIndex(0,1);
}
),
Container(child: chart)
]
)
)
);
}
void hide(){
tooltip.hide();
}showByPixel method in tooltipBehavior
The showByPixel method is used to Displays the tooltip at the specified x and y-positions.
x & y - logical pixel values to position the tooltip.
SfCartesianChart chart;
TooltipBehavior tooltip;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
// Add the required data
];
tooltip = TooltipBehavior (enable: true);
chart = SfCartesianChart(
tooltipBehavior: tooltip,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Show'),
onPressed:(){
tooltip.showByPixel(230.0,470.0);
}
),
Container(child: chart)
]
)
)
);
}
void hide(){
tooltip.hide();
}Hide method in tooltipBehavior
The hide method is used to hide the displaying tooltip programmatically.
SfCartesianChart chart;
TooltipBehavior tooltip;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34)
// Add the required data
];
tooltip = TooltipBehavior (enable: true);
chart = SfCartesianChart(
tooltipBehavior: tooltip,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Hide'),
onPressed: hide
),
Container(child: chart)
]
)
)
);
}
void hide(){
tooltip.hide();
}Methods in trackballBehavior
Show method in trackballBehavior
The show method is used to activate the trackball at the specified location.
SfCartesianChart chart;
TrackballBehavior trackball;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34)
// Add the required data
];
trackball = TrackballBehavior(enable: true);
chart = SfCartesianChart(
trackballBehavior: trackball,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Show'),
onPressed:() {
trackball.show(121, 164);
),
Container(child: chart)
]
)
)
);
}showByIndex method in trackballBehavior
The showByIndex method is used to activate the trackball at the specified point index.
pointIndex - index of the point for which the trackball must be shown.
SfCartesianChart chart;
TrackballBehavior trackball;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34)
// Add the required data
];
trackball = TrackballBehavior(enable: true);
chart = SfCartesianChart(
trackballBehavior: trackball,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Show'),
onPressed: (){
trackball.showByIndex(3);
},
),
Container(child: chart)
]
)
)
);
}Hide method in trackballBehavior
The hide method is used to hide the displaying trackball programmatically.
SfCartesianChart chart;
TrackballBehavior trackball;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
// Add the required data
];
trackball = TrackballBehavior(enable: true);
chart = SfCartesianChart(
trackballBehavior: trackball,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
],
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Hide'),
onPressed: hide
),
Container(child: chart)
]
)
)
);
}
void hide() {
trackball.hide();
}Methods in crosshairBehavior
Show method in crosshairBehavior
The show method is used to activate the crosshair at the specified location.
SfCartesianChart chart;
CrosshairBehavior crosshair;
@override
Widget build(BuildContext context) {
// Add the required data
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
];
crosshair = CrosshairBehavior(enable: true);
chart = SfCartesianChart(
crosshairBehavior: crosshair,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Show'),
onPressed: ()
{
crosshair.show(121, 164);
}
),
Container(child: chart)
]
)
)
);
}showByIndex method in crosshairBehavior
The showByIndex method is used to activate the crosshair at the specified point index.
pointIndex - index of point at which the crosshair needs to be shown.
SfCartesianChart chart;
CrosshairBehavior crosshair;
@override
Widget build(BuildContext context) {
// Add the required data
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
];
crosshair = CrosshairBehavior(enable: true);
chart = SfCartesianChart(
crosshairBehavior: crosshair,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Show'),
onPressed: ()
{
crosshair.showByIndex(2);
}
),
Container(child: chart)
]
)
)
);
}Hide method in crosshairBehavior
The hide method is used to hide the displaying crosshair programmatically.
SfCartesianChart chart;
CrosshairBehavior crosshair;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34)
// Add the required data
];
crosshair = CrosshairBehavior(enable: true);
chart = SfCartesianChart(
crosshairBehavior: crosshair,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Hide'),
onPressed: hide
),
Container(child: chart)
]
)
)
);
}
void hide() {
crosshair.hide();
}Methods in selectionSettings
SelectionIndex method in selectionSettings
The selectionIndex method is used to select the data point programmatically. The required arguments are listed below.
- pointIndex - specifies the point index value.
- seriesIndex - specifies the series index value.
- selectionType - specifies the
SelectionTypeand this is an optional parameter. - multiSelect - bool property specifies the multiple selection and this is an optional parameter.
SfCartesianChart chart;
SelectionSettings selection;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
hartData(10, 17),
ChartData(20, 34)
// Add the required data
];
selection = SelectionSettings(enable: true);
chart = SfCartesianChart(
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
selectionSettings: selection
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Select'),
onPressed: select
),
Container(child: chart)
]
)
)
);
}
void select() {
selection.selectionIndex(1, 0);
}Methods in zoomPanBehavior
ZoomIn method in zoomPanBehavior
The zoomIn method is used to increases the magnification of the plot area.
SfCartesianChart chart;
ZoomPanBehavior zooming;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34)
//add the required data
];
zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true
);
chart = SfCartesianChart(
zoomPanBehavior: zooming,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Zoom'),
onPressed: zoom
),
Container(child: chart)
]
)
)
);
}
void zoom() {
zooming.zoomIn();
}ZoomOut method in zoomPanBehavior
The zoomOut method is used to decreases the magnification of the plot area.
SfCartesianChart chart;
ZoomPanBehavior zooming;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34)
//add the required data
];
zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true
);
chart = SfCartesianChart(
zoomPanBehavior: zooming,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Zoom'),
onPressed: zoom
),
Container(child: chart)
]
)
)
);
}
void zoom() {
zooming.zoomOut();
}zoomByFactor method in zoomPanBehavior
The zoomByFactor method changes the zoom level using zoom factor. Here, you can pass the zoom factor of an axis to magnify the plot area. The value ranges from 0 to 1.
SfCartesianChart chart;
ZoomPanBehavior zooming;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
//add the required data
];
zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true
);
chart = SfCartesianChart(
zoomPanBehavior: zooming,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Zoom'),
onPressed: zoom
),
Container(child: chart)
]
)
)
);
}
void zoom() {
zooming.zoomByFactor(0.5);
}ZoomByRect method in zoomPanBehavior
The zoomByRect method zooms the chart for a given rectangle value. Here, you can pass the rectangle with the left, right, top, and bottom values, using which the selection zooming will be performed.
SfCartesianChart chart;
ZoomPanBehavior zooming;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
//add the required data
];
zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true);
chart = SfCartesianChart(
zoomPanBehavior: zooming,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Zoom'),
onPressed: zoom
),
Container(child: chart)
]
)
)
);
}
void zoom() {
zooming.zoomByRect(const Rect.fromLTRB(200, 300, 300, 400));
}ZoomToSingleAxis method in zoomPanBehavior
The zoomToSingleAxis method changes the zoom level of an appropriate axis. Here, you need to pass axis, zoom factor, zoom position of the zoom level that needs to be modified.
SfCartesianChart chart;
ZoomPanBehavior zooming;
NumericAxis xAxis;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
//add required data
];
zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true
);
xAxis = NumericAxis();
chart = SfCartesianChart(
zoomPanBehavior: zooming,
primaryXAxis: xAxis,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Zoom'),
onPressed: zoom
),
Container(child: chart)
]
)
)
);
}
void zoom() {
final double zoomPosition = 0.5;
final double zoomFactor = 0.4;
zooming.zoomToSingleAxis(xAxis,zoomPosition,zoomFactor);
}PanToDirection method in zoomPanBehavior
The panToDirection method pans the plot area for given left, right, top, and bottom directions. To perform this action, the plot area needs to be in zoomed state.
SfCartesianChart chart;
ZoomPanBehavior zooming;
NumericAxis xAxis;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
//add required data
];
zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true
);
xAxis = NumericAxis();
chart = SfCartesianChart(
zoomPanBehavior: zooming,
primaryXAxis: xAxis,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Pan'),
onPressed: pan
),
Container(child: chart)
]
)
)
);
}
void pan() {
//In similar way, specify other directions like bottom, left and right
zooming.panToDirection('top');
}Reset method in zoomPanBehavior
The reset method returns the plot area back to its original position after zooming..
SfCartesianChart chart;
ZoomPanBehavior zooming;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34)
//add the required data
];
zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true
);
chart = SfCartesianChart(
zoomPanBehavior: zooming,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Zoom'),
onPressed: zoom
),
Container(child: chart)
]
)
)
);
}
void zoom() {
zooming.reset();
}
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page