Feature request: LineChart (LineElement) show tooltip on hover over point and distinguish the line about graphic

[entronad]

@milochadam
Thanks for your advice. the suggestions are adopted in the new v0.5.1:

1. Why always the last point in tooltip is because the selection is defined to select "the whole group", which means all tuples are selected and only shows the last one in a single tuple tooltip.
   The solution is that to define another selection also tiggerd by hover, which only select one tuple ( No variable property). In old the old version, two selections with same tiggering gesture is not allowed, But we managed to make it possible in the new version and tooltip can be triggerd by more selections. Only be carefull not to define selections with same triggering gesture in one tooltip or element onSelection, which will conflict.
2. It seems you want to set interactions both for touch and mouse. The selection has a devices property to stirct which device it works. Thus you can set hover only for mouse and touch move only for touch.
3. The tooltip is automatically constrained when it will overflow the chart border. This auto adjustment can be turned off by a constrained property of tooltip.

See details in a updated example, which is derived from your example:

graphic/example/lib/pages/line_area.dart

Line 190 in 120a612

child: Chart(

[entronad]

I think your requests can all be satisfied by now. Just need a little bit more complex specifications:

1. Line with dots: you just need to set both a LineElement and a PointElement in elements list, here is a similar line with area example:

   graphic/example/lib/pages/line_area.dart

   Line 124 in a52806a

   elements: [

2. Custom your dots: inplement your own PointShape for the shape attribute, just like this example:

   graphic/example/lib/pages/custom.dart

   Line 216 in a52806a

   shape: ShapeAttr(value: TriangleShape()),

3. Legend: different people have different legend styles in mind, so we think it's not wise to provide a uniform legend component or define configurations for it. Instead, we encourage customizing the legend freely by TagAnnotation and MarkAnnotation, here is the legend example:

   graphic/example/lib/pages/custom.dart

   Line 340 in a52806a

   annotations: [

4. Tooltip: we provied a tooltip component TooltipGuide.

Your hover request is a little bit complex, it needs several steps:

1. Indicate by which variable you will group the data to get multi-lines. The indicating is implemented by / operator in the position algebra expression of all Elements.
2. Define a PointSelection which is triggered by hover gesture type. This selection's variable property should be the same as that you group the data. Then when you hover a dot, all data in the same group will be regarded as "selected", and other group datas as "unselected".
3. define there tag and color change in element's onSelection property.
   Here is a similar but simpler example that may help:

   graphic/example/lib/pages/point.dart

   Line 55 in a52806a

   child: Chart(

The specifications of this library need some efforts to learn. Please see details in the document and exaple app. But we promise it worth the efforts.

[adasium]

Thank you very much for your detailed response, I appreciate it.
I'm still struggling with the on-hover part: whole line is highlighted but data in the tool-tip doesn't change based on horizontal position of the cursor. As you can see, cursor is at the beginning but the data is from 30th October. What am I missing?

Code: https://gist.github.com/milochadam/8387aec61a687d69b5db4b0f586a3ace
Is it also possible to change position of the tool-tip if it would go outside of the chart area?

[adasium]

It does what I want, thank you very much : )