imaNNeo / fl_chart

FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
https://flchart.dev
MIT License
6.77k stars 1.74k forks source link

ScatterChart: Show label for a spot #1634

Closed davidfrankl closed 4 months ago

davidfrankl commented 5 months ago

I have a scatter chart with a series of points. Each points represents a piece of data with a label.

For example, a chart showing the performance of multiple individuals across two metrics.

When I plot this data on a scatter chart, each point represents a single person. I want the tooltip to show the name of the person.

Describe the solution you'd like

I'd like to be able to pass in a label, or a formatter, to allow me to display a custom tooltip for a given spot in the scatter chart.

Describe alternatives you've considered

In ScatterTouchTooltipData.getTooltipItems: (ScatterSpot touchedBarSpot) {} you can sort of figure out which spot needs a tooltip based on the x and y values of the touchedBarSpot.

The problem is you have to keep track separately of which label is associated with each value, and map back to it in getTooltipItems

davidfrankl commented 4 months ago

I figured out how to do this by using inheritance...

Essentially, define a class that extends ScatterSpot, say ScatterSpotWrapper, but adds a label field.

Then pass your list of ScatterSpotWrapper to the chart. Then in the getTooltipItems: (ScatterSpot flSpot) {} method, you can read the label as:

(flSpot as ScatterSpotWrapper).label
Sheng2216 commented 3 months ago

I was using something like this: scatterLabelSettings: ScatterLabelSettings( showLabel: true, getLabelFunction: getLabel, getLabelTextStyleFunction: (int index, ScatterSpot spot) => const TextStyle(color: Colors.black), ), I use the getLabel function to pass in the info I want to display but I don't like the look as it has nothing to do with tooltip, I will try the method you suggested

imaNNeo commented 3 months ago

I figured out how to do this by using inheritance...

Essentially, define a class that extends ScatterSpot, say ScatterSpotWrapper, but adds a label field.

Then pass your list of ScatterSpotWrapper to the chart. Then in the getTooltipItems: (ScatterSpot flSpot) {} method, you can read the label as:

(flSpot as ScatterSpotWrapper).label

Thanks for sharing your solution