🍃

fl_chartで折れ線グラフと棒グラフを重ねる

2023/09/24に公開

はじめに

タイトルの通りになりますが、↓を見るとcharts_flutterのCombo ChartsのようなものはなくStackで重ねるくらいしか方法がない様子
https://github.com/imaNNeo/fl_chart/issues/764

ちなみにですが、google製のcharts_flutterはDiscontinuedになってました。
https://github.com/google/charts

サンプル

ということで、Stackで重ねてみました。
https://github.com/na8esin/flutter3_chart_practice/blob/9e77e362dd4f5772f0207d1fcf0c35a19c298276/lib/main.dart

https://youtube.com/shorts/uEyUjH-QmCs

本家のサンプルコードからつぎはぎしていますが、そこそこな量になっています。

折れ線と縦棒の重なり具合は、縦棒側の左タイトルと下タイトルのreservedSizeやspaceなどで調整しているのでいい加減です。そのうちこれを計算して出せるようにしたいです。

また、折れ線側のLineTouchDataを表示できるように、Stackの順番は、折れ線を先にしています。
この辺りもまだ課題が多そうです。

しくみのテックブログ

Discussion