CODEWITHSUNDEEP
flutterdart
tajihiro
tajihiro

Reputation: 2443

How to plot labeles inside of FL Chart with flutter

I'm trying to use FL Chart with Flutter.

https://pub.dev/packages/fl_chart

I would like to put label on inside plot.

Now the picture is left side.

enter image description here

Are there any good samples or documents? Only I can find is API document. It is hard to implement.

Thank you.

Upvotes: 2

Views: 6807

Answers (1)

Ahmad Haziq
Ahmad Haziq

Reputation: 101

Hope I'm not too late in answering this. but whoever is looking for an answer, here is what I figured out recently:

Inside the LineChartData, you can customize the tooltip as what you want in lineTouchData properties. below is the snippet of the code I've used to custom my tooltip information in the graph.

Inside the LineTouchData, touchToolTipData to be used might differ depending on the type of chart you're plotting. In my case, Im plotting a line chart, hence the class im using is LineTouchTootipData. You might need to check which class suits the chart you're trying to plot.

Chart example:

chart_example

LineChartData(
  ...
  lineTouchData: LineTouchData(
      touchTooltipData: LineTouchTooltipData(
        getTooltipItems: (value) {
          return value
              .map((e) => LineTooltipItem(
                  "${e.y < 0 ? 'Expense:' : 'Income:'} ${e.y.toStringAsFixed(2)} \n Diff: ",
                  TextSetting.text14))
              .toList();
        },
        tooltipBgColor: AppColour.mainBlue,
      )
  ...

)

You can try to take a look at this sample code for a more comprehensive context of the chart.

https://github.com/imaNNeoFighT/fl_chart/blob/master/example/lib/line_chart/samples/line_chart_sample5.dart

Upvotes: 8

Related Questions