Chart Appearance & Multiple Charts

Covers background, plot area styling, color palettes, themes, rendering multiple charts, and on-demand data loading.

Background Color

SfCartesianChart(
  backgroundColor: Colors.white,
)

Plot Area Customization

The plot area is the region inside the axes where the series is rendered:

SfCartesianChart(
  plotAreaBackgroundColor: const Color(0xFFF5F5F5),
  plotAreaBackgroundImage: const AssetImage('assets/plot_bg.png'),
  plotAreaBorderColor: Colors.grey,
  plotAreaBorderWidth: 1,
)

Border and Margin

SfCartesianChart(
  borderColor: Colors.grey,
  borderWidth: 1,
  margin: const EdgeInsets.all(12),
)

Theme Integration

Apply a built-in Syncfusion chart theme:

SfCartesianChart(
)

SfChartTheme(
  data: SfChartThemeData(
    backgroundColor: Colors.black,
    axisLabelColor: Colors.white70,
    titleTextColor: Colors.white,
    legendTextColor: Colors.white70,
    plotAreaBackgroundColor: Colors.grey[900],
    majorGridLineColor: Colors.grey[700],
  ),
  child: SfCartesianChart(
  ),
)

Import: import 'package:syncfusion_flutter_core/theme.dart';

Chart Title

SfCartesianChart(
  title: ChartTitle(
    text: 'Monthly Revenue 2024',
    alignment: ChartAlignment.center,
    textStyle: const TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.bold,
      color: Colors.black87,
    ),
    backgroundColor: Colors.transparent,
    borderColor: Colors.transparent,
    borderWidth: 0,
  ),
)

Multiple Charts on One Screen

Use a Column or GridView to show multiple charts:

Column(
  children: [
    SizedBox(
      height: 200,
      child: SfCartesianChart(
        title: ChartTitle(text: 'Revenue'),
        series: <CartesianSeries>[/* ... */],
      ),
    ),
    SizedBox(
      height: 200,
      child: SfCartesianChart(
        title: ChartTitle(text: 'Expenses'),
        series: <CartesianSeries>[/* ... */],
      ),
    ),
  ],
)

Each SfCartesianChart instance is independent with its own ZoomPanBehavior, TooltipBehavior, etc.

Linked Charts (Synchronized Zoom/Pan)

To synchronize scrolling or zooming across multiple charts, use the same onZooming/onZoomEnd callbacks to update the other chart's zoom state manually. There is no built-in sync API — implement via shared state and ZoomPanBehavior.zoomToSingleAxis().

On-Demand / Lazy Data Loading

Load additional data as the user pans to the edges of the chart:

SfCartesianChart(
  primaryXAxis: DateTimeAxis(
    onActualRangeChanged: (ActualRangeChangedArgs args) {
      _loadMoreDataIfNeeded(args.visibleMin, args.visibleMax);
    },
  ),
  loadMoreIndicatorBuilder: (BuildContext context, ChartSwipeDirection direction) {
    return const CircularProgressIndicator();
  },
  onPlotAreaSwipe: (ChartSwipeDirection direction) {
    if (direction == ChartSwipeDirection.end) {
      _loadMoreData();
    }
  },
)

Rendering Delay Optimization

For large datasets, defer rendering to avoid blocking the UI:

SfCartesianChart(
  series: <CartesianSeries>[
    FastLineSeries<ChartData, double>( 
      dataSource: largeDataSet,
      xValueMapper: (d, _) => d.x,
      yValueMapper: (d, _) => d.y,
      animationDuration: 0, 
    ),
  ],
)

3.3 KiB Raw Blame History