165 lines
3.3 KiB
Markdown
165 lines
3.3 KiB
Markdown
# Chart Appearance & Multiple Charts
|
|
|
|
Covers background, plot area styling, color palettes, themes, rendering multiple charts, and on-demand data loading.
|
|
|
|
---
|
|
|
|
## Background Color
|
|
|
|
```dart
|
|
SfCartesianChart(
|
|
backgroundColor: Colors.white,
|
|
)
|
|
```
|
|
|
|
---
|
|
|
|
## Plot Area Customization
|
|
|
|
The plot area is the region inside the axes where the series is rendered:
|
|
|
|
```dart
|
|
SfCartesianChart(
|
|
plotAreaBackgroundColor: const Color(0xFFF5F5F5),
|
|
plotAreaBackgroundImage: const AssetImage('assets/plot_bg.png'),
|
|
plotAreaBorderColor: Colors.grey,
|
|
plotAreaBorderWidth: 1,
|
|
)
|
|
```
|
|
|
|
---
|
|
|
|
## Border and Margin
|
|
|
|
```dart
|
|
SfCartesianChart(
|
|
borderColor: Colors.grey,
|
|
borderWidth: 1,
|
|
margin: const EdgeInsets.all(12),
|
|
)
|
|
```
|
|
|
|
---
|
|
## Theme Integration
|
|
|
|
Apply a built-in Syncfusion chart theme:
|
|
|
|
```dart
|
|
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
|
|
|
|
```dart
|
|
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:
|
|
|
|
```dart
|
|
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:
|
|
|
|
```dart
|
|
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:
|
|
|
|
```dart
|
|
SfCartesianChart(
|
|
series: <CartesianSeries>[
|
|
FastLineSeries<ChartData, double>(
|
|
dataSource: largeDataSet,
|
|
xValueMapper: (d, _) => d.x,
|
|
yValueMapper: (d, _) => d.y,
|
|
animationDuration: 0,
|
|
),
|
|
],
|
|
)
|
|
```
|