CODEWITHSUNDEEP
flutterfl-chart
t3nsa
t3nsa

Reputation: 880

FlChart LineTouchTooltipData dynamic background color

I want to create a LineChart using fl_chart and I need the tooltip background to change color based on touched spot for example the color should be determined by this method

  Color _getColor(List<int> intervals, double value) {
    if (value >= intervals[0] && value < intervals[1]) {
      return AppConstants.greenColor;
    } else if (value >= intervals[1] && value < intervals[2]) {
      return AppConstants.yellowColor;
    }
    return AppConstants.redColor;
  }

current code:

LineTouchData(

                  touchTooltipData: LineTouchTooltipData(
                    tooltipBgColor: Colors.red,
                    fitInsideHorizontally: true,
                    fitInsideVertically: true,
                    tooltipRoundedRadius: 100,
                    getTooltipItems: (touchedSpots) {
                      return touchedSpots
                          .map(
                            (e) => LineTooltipItem(
                              e.y.toString(),
                              const TextStyle(),
                            ),
                          )
                          .toList();
                    },
                  ),
                ),

Upvotes: 0

Views: 1034

Answers (1)

salomepx
salomepx

Reputation: 83

In the latest version of fl_chart, the parameter to use for the background box color is:

getTooltipColor: (touchedSpot) => _getColor(intervals, value)

It implies that your full code will be:

LineTouchData(
  touchTooltipData: LineTouchTooltipData(
  getTooltipColor: (touchedSpot) => _getColor(intervals, value),
  fitInsideHorizontally: true,
  fitInsideVertically: true,
  tooltipRoundedRadius: 100,
  getTooltipItems: (touchedSpots) {
    return touchedSpots
      .map(
        (e) => LineTooltipItem(
          e.y.toString(),
          const TextStyle(),
        ),
      )
      .toList();
    },
  ),
),

Upvotes: 0

Related Questions