#fl_chart Unable to customize tooltip label

Question

I am currently using fl_chart package. https://pub.dev/packages/fl_chart

Overview:

I am plotting two line graphs simultaneously to represent two distinct trends(ex: Income vs expense). Assume that the information involved in this are of type 'Income' and 'Expense')

Problem: As image below, I am unable to customize the tooltip label accordingly to their respective trend. Supposedly, '60' represent the 'Expense' information while '5000' represent 'Income' information.

problem

The current workaround:

...
LineTooltipItem(
            "${e.y < 0 ? 'Expense:' : e.y > 0 ? 'Income:' : ''} ${e.y == 0 ? '' : e.y.toStringAsFixed(2)}",
            TextSetting.text14);
...

I have to convert the trend figures into -ve integers and use this to identify it as 'Expense' type. The problem with this is that it is impossible to compare the visual trends side by side. Instead, the comparison is known after subtracting 'Expense' and 'Income' and see which type is higher. Images provided below are attached to provide a clear illustration of the plotting difference and how an instant comparison of the value cannot be achieved.

The desired plot should be as in image1.

Can anyone help with this? Please have a look at the image attached for a more clear picture.

image1 image2

Answer 1

In LineTooltipItem() widget we can provide a List of TextSpan as children. It can be customised.

Answer 2

LineTouchData(
    touchTooltipData: LineTouchTooltipData(
       fitInsideHorizontally: true,
        tooltipBgColor:
            widget.color == raisinBlack ? raisinBlack08 : raisinBlack,
        maxContentWidth: 200 * SizeConfig.widthMultiplier!,
        getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
          return touchedBarSpots.map((barSpot) {
            final flSpot = barSpot;
            return LineTooltipItem(
              DateFormat('dd MMM yyyy').format(DateTime.tryParse(
                  widget.list[flSpot.x.toInt()].key.toString())!),
              TextStyle(
                  fontWeight: FontWeight.w500,
                  fontFamily: 'BRFirma',
                  color:raisinBlack 
                  fontSize: 14 * SizeConfig.textMultiplier!),
              children: [
                const TextSpan(
                  text: '\n',
                ),
                TextSpan(
                  text: '${widget.titleName} :   ',
                  style: TextStyle(
                      height: 2,
                      fontWeight: FontWeight.w500,
                      fontFamily: 'BRFirma',
                      color: Colors.white,
                      fontSize: 14 * SizeConfig.textMultiplier!),
                ),
                TextSpan(
                  text: flSpot.y.toString(),
                  style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontFamily: 'BRFirma',
                      color:raisinBlack ,
                      fontSize: 14 * SizeConfig.textMultiplier!),
                ),
              ],
              textAlign: TextAlign.left,
            );
          }).toList();
        }),
  ),

Answer 3

I think I found a solution to add a circle on fl_chart tooltip, using the circle charactere \u25CF

The shadow is for create a white border to the circle, using the charactere. You can see the results:

Img example tooltip with circle

Code bellow:

LineTooltipItem(
              "", TextStyle(fontWeight: FontWeight.normal, height: 1.5.h),
              textAlign: TextAlign.start,
              children: [
                TextSpan(
                  text:
                      "\u25CF\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0", // circle
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: widget.color,
                    shadows: <Shadow>[
                      Shadow(
                        offset: Offset(
                            shadowCircleOffsetNegative, shadowCircleOffset),
                        blurRadius: 2,
                        color: AppColors.colorWhite,
                      ),
                      Shadow(
                        offset: Offset(
                            shadowCircleOffset, shadowCircleOffsetNegative),
                        blurRadius: blurRadius,
                        color: AppColors.colorWhite,
                      ),
                      Shadow(
                        offset:
                            Offset(shadowCircleOffset, shadowCircleOffset),
                        blurRadius: blurRadius,
                        color: AppColors.colorWhite,
                      ),
                      Shadow(
                          offset: Offset(shadowCircleOffsetNegative,
                              shadowCircleOffsetNegative),
                          blurRadius: blurRadius,
                          color: AppColors.colorWhite),
                    ],
                  ),
                ),
                TextSpan(
                  text:
                      "${title}: ${AppUtils.doubleToMoneyReal(flSpot.y)} \u00A0\u00A0\u00A0",
                  style: TextFontStyles.captionSemiboldXXXS(
                      colorFont: AppColors.colorWhite),
                ),
              ])

The shadowCircleOffsetNegative and shadowCircleOffset should be -1 and 1, or -1.5 and 1.5, or -2 and 2. Just add this variables to your code to adjust the shadows as you like.