高機能チャートライブラリsyncfusion_flutter_chartsを試してみた

ライセンスによっては有料ですが、高機能なチャートライブラリ[syncfusion_flutter_charts](https://pub.dev/packages/syncfusion_flutter_charts)を試してみたので紹介します。

<img src="https://cdn.syncfusion.com/content/images/FTControl/Charts/chart_types_updated.png">

## 料金
年間総収入が100万米ドル未満で、開発者が5人以下の企業および個人は`COMMUNITY LICENSE`で無料で使うことができます。
それ以外のライセンス`TEAM LICENSE`,`UNLIMITED LICENSE`の料金は、こちらに記載されています。
https://www.syncfusion.com/sales/communitylicense

## Line Chartを試してみる
### まずは表示してみる

これだけの実装で十分立派なチャートが表示されます。
```dart
class ChartData {
  ChartData(this.date, this.y);
  final DateTime date;
  final num? y;
}

class _ChartState extends State<Chart> {
  List<ChartData> chartData = <ChartData>[]; 

  Widget build(BuildContext context) {
    return SfCartesianChart(
      primaryXAxis: DateTimeAxis(),
      primaryYAxis: NumericAxis(),
      series: [
        LineSeries<ChartData, DateTime>(
          dataSource: chartData,
          color: Colors.blue,
          xValueMapper: (ChartData data, _) => data.date,
          yValueMapper: (ChartData data, _) => data.y,
        )
      ],
    );
  }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107427/5636bae9-ed9a-e52e-f74e-db60a8c29533.png" width="320">

### Y軸のラベルを調整する
例えば1万単位でラベルを表示したい、ラベルの末尾を `万`にしたいのようなことも、NumericAxisのプロパティを使うことでできます。
```dart
    return SfCartesianChart(
      primaryYAxis: NumericAxis(
        minimum: 90000,
        maximum: 110000,
        interval: 10000,
        axisLabelFormatter: (AxisLabelRenderDetails axisLabelRenderArgs) {
          if (axisLabelRenderArgs.value > 0) {
            return ChartAxisLabel("${axisLabelRenderArgs.value ~/ 10000}万", null);
          } else {
            return ChartAxisLabel("0", null);
          }
        },
      ),

```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107427/00816b22-3796-0dfb-9fd7-1b7d4326e493.png" width="320">

同様にX軸もDateTimeAxisを設定することで自由にラベルを設定できます。

### Tooltipを表示する
TooltipBehaviorを設定することで表示できます。

```dart
    return SfCartesianChart(
      tooltipBehavior: TooltipBehavior(enable: true),
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107427/b8f12385-07c6-7ed0-e2ab-d5f63ba8575c.png" width="320">

### Tooltipをカスタマイズする
TooltipをカスタマイズするにはTooltipBehavior.builderを使うことで、実現できます。
```dart
    return SfCartesianChart(  
      tooltipBehavior: TooltipBehavior(
        enable: true,
        builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int seriesIndex) {
          if (chartData.length < pointIndex) {
            return const SizedBox.shrink();
          }

          final data = chartData[pointIndex];
          final dateFormat = DateFormat('yyyy/MM/dd');
          final numberFormat = NumberFormat('#,###');
          return Container(
            height: 55,
            padding: const EdgeInsets.all(10),
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(5)),
              color: Color(0xFFF7F7F7),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  dateFormat.format(data.date),
                  style: const TextStyle(color: Colors.black, fontSize: 12),
                ),
                Text(
                  "¥${numberFormat.format(data.y)}",
                  style: const TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w700),
                ),
              ],
            ),
          );
        },
      ),
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107427/970e745d-8c47-662f-504d-b41884f2c91c.png" width="320">

## 最後に
Line Chartを例に簡単な実装を紹介しましたが、これ以外にも多様なカスタマイズを実現するための仕組みが提供されています。
数百件以上のデータを表示しても問題ないし、大量データの一部だけを表示しそのレンジを自由に操作できるようなチャートも設定できたりと十分に実践レベルの出来であると感じました。
値段が問題ないようであれば、実際のプロダクトでもぜひ利用してみたいと思います！