Implementing Syncfusion Flutter Cartesian Charts

SfCartesianChart

syncfusion_flutter_charts

When to Use This Skill

• Render any line, area, column, bar, spline, scatter, or financial chart in Flutter
• Configure axis types (numeric, category, date-time, logarithmic)
• Add zooming, panning, tooltip, trackball, or crosshair interaction
• Customize series appearance (colors, gradients, markers, data labels)
• Add annotations, technical indicators, or trendlines
• Export charts or respond to chart callbacks
• Support RTL, localization, or accessibility

Component Overview

• Line Charts: Line, fast line, spline (various tension types), step line
• Area Charts: Area, spline area, step area, range area, spline range area, stacked area (including 100%)
• Column/Bar Charts: Column, bar, range column, stacked column/bar (including 100%)
• Scatter/Bubble: Scatter, bubble charts
• Financial Charts: Candle, OHLC, HiLo, HiLoOpenClose with support for technical indicators
• Statistical: Histogram, box and whisker, error bar
• Waterfall: For cumulative effect visualization

Quick Start

# Always installs the latest compatible version automatically
flutter pub add syncfusion_flutter_charts

Always install the package via terminal — do not edit

pubspec.yaml

directly. Run this command from the Flutter project root and wait for it to complete successfully before proceeding.

import 'package:syncfusion_flutter_charts/charts.dart';

class MyChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 300,
      child: SfCartesianChart(
        primaryXAxis: CategoryAxis(),
        title: ChartTitle(text: 'Monthly Sales'),
        legend: Legend(isVisible: true),
        tooltipBehavior: TooltipBehavior(enable: true),
        series: <CartesianSeries>[
          LineSeries<ChartData, String>(
            dataSource: [
              ChartData('Jan', 35),
              ChartData('Feb', 28),
              ChartData('Mar', 34),
              ChartData('Apr', 32),
              ChartData('May', 40),
            ],
            xValueMapper: (ChartData d, _) => d.x,
            yValueMapper: (ChartData d, _) => d.y,
            name: 'Sales',
            dataLabelSettings: DataLabelSettings(isVisible: true),
          ),
        ],
      ),
    );
  }
}

class ChartData {
  ChartData(this.x, this.y);
  final String x;
  final double? y;
}

Navigation Guide

Getting Started

• Package installation and import
• Initialize SfCartesianChart
• Bind data source and data model
• Add title, data labels, legend, tooltip
• Complete minimal working example

Line, Area & Spline Chart Types

• Line, fast line, spline (with spline types)
• Step line, area, spline area
• Step area, range area, spline range area
• When to use each type

Column, Bar & Other Cartesian Types

• Column, bar, range column
• Bubble, scatter, histogram
• Waterfall, error bar, box and whisker
• Key configuration for each type

Stacked Chart Types

• Stacked area/bar/column/line
• 100% stacked variants
• When to choose stacked vs 100% stacked

Financial Chart Types

• Candle, HILO, OHLC charts
• Financial data model (open/high/low/close mappers)
• Hollow candle and solid candle

Axis Types

• NumericAxis, CategoryAxis, DateTimeAxis
• DateTimeCategoryAxis, LogarithmicAxis
• Choosing the right axis for your data

Axis Customization

• Title, labels, label format
• Gridlines, tick marks, range (min/max/interval)
• Strip lines, multi-level labels
• Secondary axis, axis crossing, inversed axis

Series Customization

• Color, border, opacity, gradient fill
• Dash array, width, point color mapper
• Animation, palette colors, empty point settings

Legend

• Enable and position legend
• Toggle series visibility via legend
• Overflow modes (wrap, scroll)
• Custom legend items and icons

Tooltip, Trackball & Crosshair

• TooltipBehavior — enable, format, custom template
• Shared tooltip across series
• TrackballBehavior — display modes
• CrosshairBehavior configuration

Zooming, Panning & Selection

• ZoomPanBehavior — pinch, mouse wheel, directional
• ZoomMode (x, y, xy), panning
• Auto-scrolling for live data
• SelectionBehavior — point, series, cluster, box

Annotations, Markers & Data Labels

• CartesianChartAnnotation — text and widget overlays
• Coordinate units (point vs pixel vs percent)
• MarkerSettings — shape, size, color
• DataLabelSettings — position, format, template, connector lines

Technical Indicators & Trendlines

• SMA, EMA, TMA, WMA, MACD, RSI, Stochastic
• Bollinger Bands, ATR, CCI, Momentum, AD, ROC
• Trendline types (linear, exponential, polynomial, moving average, power, logarithmic)
• Forecasting periods

Chart Appearance & Multiple Charts

• Background color/image, plot area customization
• Color palette, theme integration
• Rendering multiple charts on the same screen
• On-demand / lazy data loading

Callbacks, Methods, Export & Accessibility

• Key callbacks (onTooltipRender, onDataLabelRender, onZooming, etc.)
• ChartSeriesController methods (updateDataSource, animate)
• Export to PNG, PDF, JPEG
• Localization, RTL, accessibility

Common Patterns

Pattern 1 — Live / Real-Time Data Update

late ChartSeriesController _controller;

onRendererCreated: (ChartSeriesController controller) {
  _controller = controller;
},

void addDataPoint(ChartData newPoint) {
  chartData.add(newPoint);
  _controller.updateDataSource(
    addedDataIndexes: [chartData.length - 1],
  );
}

Pattern 2 — Multiple Series on One Chart

series: <CartesianSeries>[
  LineSeries<ChartData, String>(
    dataSource: data,
    xValueMapper: (d, _) => d.x,
    yValueMapper: (d, _) => d.y1,
    name: 'Revenue',
  ),
  ColumnSeries<ChartData, String>(
    dataSource: data,
    xValueMapper: (d, _) => d.x,
    yValueMapper: (d, _) => d.y2,
    name: 'Cost',
  ),
]

Pattern 3 — Zoom + Tooltip Together

late ZoomPanBehavior _zoom;
late TooltipBehavior _tooltip;

@override
void initState() {
  _zoom = ZoomPanBehavior(enablePinching: true, enableDoubleTapZooming: true);
  _tooltip = TooltipBehavior(enable: true);
  super.initState();
}

zoomPanBehavior: _zoom,
tooltipBehavior: _tooltip,

Key Widget Properties

primaryXAxis

ChartAxis

primaryYAxis

ChartAxis

series

List<CartesianSeries>

title

ChartTitle

legend

Legend

tooltipBehavior

TooltipBehavior

zoomPanBehavior

ZoomPanBehavior

selectionType

SelectionType

annotations

List<CartesianChartAnnotation>

indicators

List<TechnicalIndicator>

onTooltipRender

ChartTooltipCallback

onZooming

ChartZoomingCallback

palette

List<Color>