SfCartesianChart class
Renders the Cartesian type charts.
Cartesian charts are generally charts with horizontal and vertical axes.SfCartesianChart provides options to customize
chart types using the series
property.
TooltipBehavior _tooltipBehavior;
@override
void initState() {
_tooltipBehavior = TooltipBehavior( enable: true);
super.initState();
}
Widget build(BuildContext context) {
return Center(
child:SfCartesianChart(
title: ChartTitle(text: 'Flutter Chart'),
legend: Legend(isVisible: true),
series: getDefaultData(),
tooltipBehavior: _tooltipBehavior,
)
);
}
static List<LineSeries<SalesData, num>> getDefaultData() {
final List<SalesData> chartData = <SalesData>[
SalesData(DateTime(2005, 0, 1), 'India', 1.5, 21, 28, 680, 760),
SalesData(DateTime(2006, 0, 1), 'China', 2.2, 24, 44, 550, 880),
SalesData(DateTime(2007, 0, 1), 'USA', 3.32, 36, 48, 440, 788),
SalesData(DateTime(2008, 0, 1), 'Japan', 4.56, 38, 50, 350, 560),
SalesData(DateTime(2009, 0, 1), 'Russia', 5.87, 54, 66, 444, 566),
SalesData(DateTime(2010, 0, 1), 'France', 6.8, 57, 78, 780, 650),
SalesData(DateTime(2011, 0, 1), 'Germany', 8.5, 70, 84, 450, 800)
];
return <LineSeries<SalesData, num>>[
LineSeries<SalesData, num>(
enableToolTip: isTooltipVisible,
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.numeric,
yValueMapper: (SalesData sales, _) => sales.sales1,
width: lineWidth ?? 2,
enableAnimation: false,
markerSettings: MarkerSettings(
isVisible: isMarkerVisible,
height: markerWidth ?? 4,
width: markerHeight ?? 4,
shape: DataMarkerType.Circle,
borderWidth: 3,
borderColor: Colors.red),
dataLabelSettings: DataLabelSettings(
visible: isDataLabelVisible, position: ChartDataLabelAlignment.Auto)),
LineSeries<SalesData, num>(
enableToolTip: isTooltipVisible,
dataSource: chartData,
enableAnimation: false,
width: lineWidth ?? 2,
xValueMapper: (SalesData sales, _) => sales.numeric,
yValueMapper: (SalesData sales, _) => sales.sales2,
markerSettings: MarkerSettings(
isVisible: isMarkerVisible,
height: markerWidth ?? 4,
width: markerHeight ?? 4,
shape: DataMarkerType.Circle,
borderWidth: 3,
borderColor: Colors.black),
dataLabelSettings: DataLabelSettings(
isVisible: isDataLabelVisible, position: ChartDataLabelAlignment.Auto))
];
}
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- SfCartesianChart
Constructors
-
SfCartesianChart({Key? key, Color? backgroundColor, bool enableSideBySideSeriesPlacement = true, Color borderColor = Colors.transparent, double borderWidth = 0, Color? plotAreaBackgroundColor, Color? plotAreaBorderColor, double plotAreaBorderWidth = 0.7, ImageProvider<
Object> ? plotAreaBackgroundImage, ChartTooltipCallback? onTooltipRender, ChartActualRangeChangedCallback? onActualRangeChanged, ChartDataLabelRenderCallback? onDataLabelRender, ChartLegendRenderCallback? onLegendItemRender, ChartTrackballCallback? onTrackballPositionChanging, ChartCrosshairCallback? onCrosshairPositionChanging, ChartZoomingCallback? onZooming, ChartZoomingCallback? onZoomStart, ChartZoomingCallback? onZoomEnd, ChartZoomingCallback? onZoomReset, ChartAxisLabelTapCallback? onAxisLabelTapped, DataLabelTapCallback? onDataLabelTapped, ChartLegendTapCallback? onLegendTapped, ChartSelectionCallback? onSelectionChanged, ChartTouchInteractionCallback? onChartTouchInteractionUp, ChartTouchInteractionCallback? onChartTouchInteractionDown, ChartTouchInteractionCallback? onChartTouchInteractionMove, ChartMarkerRenderCallback? onMarkerRender, bool isTransposed = false, bool enableAxisAnimation = false, List<CartesianChartAnnotation> ? annotations, LoadMoreViewBuilderCallback? loadMoreIndicatorBuilder, ChartPlotAreaSwipeCallback? onPlotAreaSwipe, List<Color> palette = const <Color>[Color.fromRGBO(75, 135, 185, 1), Color.fromRGBO(192, 108, 132, 1), Color.fromRGBO(246, 114, 128, 1), Color.fromRGBO(248, 177, 149, 1), Color.fromRGBO(116, 180, 155, 1), Color.fromRGBO(0, 168, 181, 1), Color.fromRGBO(73, 76, 162, 1), Color.fromRGBO(255, 205, 96, 1), Color.fromRGBO(255, 240, 219, 1), Color.fromRGBO(238, 238, 238, 1)], ChartAxis? primaryXAxis, ChartAxis? primaryYAxis, EdgeInsets? margin, TooltipBehavior? tooltipBehavior, ZoomPanBehavior? zoomPanBehavior, Legend? legend, SelectionType? selectionType, ActivationMode? selectionGesture, bool? enableMultiSelection, CrosshairBehavior? crosshairBehavior, TrackballBehavior? trackballBehavior, dynamic series, ChartTitle? title, List<ChartAxis> ? axes, List<TechnicalIndicators> ? indicators}) - Creating an argument constructor of SfCartesianChart class.
Properties
-
annotations
→ List<
CartesianChartAnnotation> ? -
Customizes the annotations. Annotations are used to mark the specific area of interest
in the plot area with texts, shapes, or images.
final
-
axes
→ List<
ChartAxis> -
Customizes the additional axes in the chart.
final
- backgroundColor → Color?
-
Background color of the chart.
final
- borderColor → Color
-
Color of the chart border.
final
- borderWidth → double
-
Width of the chart border.
final
- crosshairBehavior → CrosshairBehavior
-
Customizes the crosshair in chart.
final
- enableAxisAnimation → bool
-
Axis elements animation on visible range change.
final
- enableMultiSelection → bool
-
Enables or disables the multiple data points or series selection.
final
- enableSideBySideSeriesPlacement → bool
-
Enables or disables the placing of series side by side.
final
- hashCode → int
-
The hash code for this object.
no setterinherited
-
indicators
→ List<
TechnicalIndicators> -
Technical indicators for charts.
final
- isTransposed → bool
-
By setting this, the orientation of x-axis is set to vertical and orientation of
y-axis is set to horizontal.
final
- key → Key?
-
Controls how one widget replaces another widget in the tree.
finalinherited
- legend → Legend
-
Customizes the legend in the chart.
final
- loadMoreIndicatorBuilder → LoadMoreViewBuilderCallback?
-
A builder that builds the widget (ex., loading indicator or load more button)
to display at the top of the chart area when horizontal scrolling reaches
the start or end of the chart.
final
- margin → EdgeInsets
-
Margin for chart.
final
- onActualRangeChanged → ChartActualRangeChangedCallback?
-
Occurs when the visible range of an axis is changed, i.e. value changes for minimum,
maximum, and interval. Here, you can get the actual and visible range of an axis.
final
- onAxisLabelTapped → ChartAxisLabelTapCallback?
-
Occurs when tapping the axis label. Here, you can get the appropriate axis that is
tapped and the axis label text.
final
- onChartTouchInteractionDown → ChartTouchInteractionCallback?
-
Occurs when touched on the chart area.
final
- onChartTouchInteractionMove → ChartTouchInteractionCallback?
-
Occurs when touched and moved on the chart area.
final
- onChartTouchInteractionUp → ChartTouchInteractionCallback?
-
Occurs when tapped on the chart area.
final
- onCrosshairPositionChanging → ChartCrosshairCallback?
-
Occurs when tapping the axis label. Here, you can get the appropriate axis that is
tapped and the axis label text.
final
- onDataLabelRender → ChartDataLabelRenderCallback?
-
Occurs when tapping the axis label. Here, you can get the appropriate axis that is
tapped and the axis label text.
final
- onDataLabelTapped → DataLabelTapCallback?
-
Called when the data label is tapped.
final
- onLegendItemRender → ChartLegendRenderCallback?
-
Occurs when the legend item is rendered. Here, you can get the legend’s text,
shape, series index, and point index of circular series.
final
- onLegendTapped → ChartLegendTapCallback?
-
Occurs when the legend item is rendered. Here, you can get the legend’s text,
shape, series index, and point index of circular series.
final
- onMarkerRender → ChartMarkerRenderCallback?
-
Occurs when the marker is rendered. Here, you can get the marker pointIndex
shape, height and width of data markers.
final
- onPlotAreaSwipe → ChartPlotAreaSwipeCallback?
-
Called while swiping on the plot area.
final
- onSelectionChanged → ChartSelectionCallback?
-
Occurs while selection changes. Here, you can get the series, selected color,
unselected color, selected border color, unselected border color, selected border
width, unselected border width, series index, and point index.
final
- onTooltipRender → ChartTooltipCallback?
-
Occurs while tooltip is rendered. You can customize the position and header.
Here, you can get the text, header, point index, series, x and y-positions.
final
- onTrackballPositionChanging → ChartTrackballCallback?
-
Occurs while the trackball position is changed. Here, you can customize the text of
the trackball.
final
- onZoomEnd → ChartZoomingCallback?
-
Occurs when the zooming action is completed. Here, you can get the axis, current
zoom factor, current zoom position, previous zoom factor, and previous zoom position.
final
- onZooming → ChartZoomingCallback?
-
Occurs when Zooming event is performed. Here, you can get the axis, current zoom factor,
current zoom position, previous zoom factor, and previous zoom position.
final
- onZoomReset → ChartZoomingCallback?
-
Occurs when zoomed state is reset. Here, you can get the axis, current zoom factor,
current zoom position, previous zoom factor, and previous zoom position.
final
- onZoomStart → ChartZoomingCallback?
-
Occurs when zooming action begins. You can customize the zoom factor and zoom
position of an axis. Here, you can get the axis, current zoom factor, current
zoom position, previous zoom factor, and previous zoom position.
final
-
palette
→ List<
Color> -
Color palette for chart series. If the series color is not specified, then the series
will be rendered with appropriate palette color. Ten colors are available by default.
final
- plotAreaBackgroundColor → Color?
-
Background color of the plot area.
final
-
plotAreaBackgroundImage
→ ImageProvider<
Object> ? -
Background image for chart.
final
- plotAreaBorderColor → Color?
-
Border color of the plot area.
final
- plotAreaBorderWidth → double
-
Border width of the plot area.
final
- primaryXAxis → ChartAxis
-
Customizes the primary x-axis in chart.
final
- primaryYAxis → ChartAxis
-
Customizes the primary y-axis in chart.
final
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- selectionGesture → ActivationMode
-
Gesture for activating the selection. Selection can be activated in tap,
double tap, and long press.
final
- selectionType → SelectionType
-
Mode of selecting the data points or series.
final
-
series
→ List<
ChartSeries> -
Customizes the series in chart.
final
- title → ChartTitle
-
Customizes the chart title.
final
- tooltipBehavior → TooltipBehavior
-
Customizes the tooltip in chart.
final
- trackballBehavior → TrackballBehavior
-
Customizes the trackball in chart.
final
- zoomPanBehavior → ZoomPanBehavior
-
Customizes the zooming and panning settings.
final
Methods
-
createElement(
) → StatefulElement -
Creates a StatefulElement to manage this widget's location in the tree.
inherited
-
createState(
) → State< StatefulWidget> -
Creates the mutable state for this widget at a given location in the tree.
override
-
debugDescribeChildren(
) → List< DiagnosticsNode> -
Returns a list of DiagnosticsNode objects describing this node's
children.
inherited
-
debugFillProperties(
DiagnosticPropertiesBuilder properties) → void -
Add additional properties associated with the node.
inherited
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
toDiagnosticsNode(
{String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode -
Returns a debug representation of the object that is used by debugging
tools and by DiagnosticsNode.toStringDeep.
inherited
-
toString(
{DiagnosticLevel minLevel = DiagnosticLevel.info}) → String -
A string representation of this object.
inherited
-
toStringDeep(
{String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String -
Returns a string representation of this node and its descendants.
inherited
-
toStringShallow(
{String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String -
Returns a one-line detailed description of the object.
inherited
-
toStringShort(
) → String -
A short, textual description of this widget.
inherited
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited