Add shadow to line chart's tooltip

[Sosssen]

hi:)

this PR resolves #1767

i've added 3 params to LineTouchTooltipData for tooltip shadow:

• shadowColor - color of the shadow
• shadowBlur - sigma value of mask filter blur (how much will shadow be blurred)
• shadowOffset - offset of the shadow (related to tooltip)

please check the image below to see example of changes:)

and the code code of LineTouchTooltipData from example image:

LineTouchData get lineTouchData => LineTouchData(
        touchTooltipData: LineTouchTooltipData(
          getTooltipColor: (touchedSpot) => Colors.black,
          shadowColor: Colors.white.withOpacity(0.25),
          shadowBlur: 4,
          shadowOffset: const Offset(0, 4),
        ),
      );

[seniorb]

Would be great if this could be added to the barchart tooltip as well!

[imaNNeo]

Hi, thanks for your details description.
We already have a shadow feature in our line chart, that works like a simple shadow property (that uses the Shadow class from flutter).

Can you please use the same naming and method of drawing shadow, this way we keep the consistency in the project.

Look at the below code:

fl_chart/lib/src/chart/line_chart/line_chart_data.dart

Lines 359 to 360 in 0e75570

	/// Drops a shadow behind the bar line.
	final Shadow shadow;

fl_chart/lib/src/chart/line_chart/line_chart_painter.dart

Lines 911 to 938 in 0e75570

	if (!barData.show || barData.shadow.color.opacity == 0.0) {
	return;
	}
	if (barPath.computeMetrics().isEmpty) {
	return;
	}
	_barPaint
	..strokeCap = barData.isStrokeCapRound ? StrokeCap.round : StrokeCap.butt
	..strokeJoin =
	barData.isStrokeJoinRound ? StrokeJoin.round : StrokeJoin.miter
	..color = barData.shadow.color
	..shader = null
	..strokeWidth = barData.barWidth
	..color = barData.shadow.color
	..maskFilter = MaskFilter.blur(
	BlurStyle.normal,
	Utils().convertRadiusToSigma(barData.shadow.blurRadius),
	);
	barPath = barPath.toDashedPath(barData.dashArray);
	barPath = barPath.shift(barData.shadow.offset);
	canvasWrapper.drawPath(
	barPath,
	_barPaint,
	);

[imaNNeo]

Hi, can you please take a look at my comment above?

[Sosssen]

hi @imaNNeo , sorry, i got caught up in other projects.

i'll try to fix it this week:)

[Sosssen]

hi @imaNNeo, finally got some time to fix this.. sorry for the delay

please check if it is all good now:)

[imaNNeo]

Very nice!
It looks good to me. So we can merge it.
But before that can you please add this useful property also in our BarTouchTooltipData and ScatterTouchTooltipData?
This way, we can maintain a consistency between the axis-based charts.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.53%. Comparing base (195a41c) to head (bf8aa1d).
Report is 6 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1768      +/-   ##
==========================================
+ Coverage   92.51%   92.53%   +0.02%     
==========================================
  Files          46       46              
  Lines        3341     3351      +10     
==========================================
+ Hits         3091     3101      +10     
  Misses        250      250              

Flag	Coverage Δ
flutter	92.53% <100.00%> (+0.02%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[Sosssen]

sure, i'll try to finish it this week:)

[xFlaviews]

Any updates?

[Sosssen]

hi, thanks for reminder @xFlaviews:)

@imaNNeo i've added similar shadow feature to BarTouchTooltipData and ScatterTouchTooltipData, as you suggested

here are results:

please check if everything is ok and lets finally merge this!:)

[xFlaviews]

hi, thanks for reminder @xFlaviews:)

@imaNNeo i've added similar shadow feature to BarTouchTooltipData and ScatterTouchTooltipData, as you suggested

here are results:

please check if everything is ok and lets finally merge this!:)

Thank you @Sosssen !
Was needing it, and was considering to implement it myself but i was your PR, tyvm again!

[xFlaviews]

@imaNNeo any updates?

[WeiKuang]

any updates?

[imaNNeo]

Thanks so much!
Now I see two things that we need to address before merging it:

1. The shadow property is not added in props => [] in BarTouchTooltipData and ScatterTouchTooltipData
2. Can you please update our documentation to add this new property? (in scatter_chart.md, line_chart.md and bar_chart.md)

I also remembered that we also have our brand new CandlestickChart that has the tooltip feature, so it would be nice if you also add this feature there. (but it is not crucial as I forgot to mention it earlier xD)

[imaNNeo]

Hey, can you please update your branch and reply to my last comment?
Thanks!

[thomasaldershof]

Not really sure how it works, but I updated the original PR with at least your previous comment. I have not messed with the CandlestickChart painter for the tooltip. Mainly created this for my own interest, but would be nice to see @Sosssen work merged :)

https://github.com/thomasaldershof/fl_chart/tree/update-pr-1768