Hover and Color for each data point

[Goutham]

Hello,

 1) I am trying to put some extra notes while hovering over data points. I am using a Scatter plot. While trying the example given below, it only works for "line" but not scatter. I am also getting data from firebase from a JSON structure. please let me know how the structure should be. Refer screenshot 1.

 <ChartSeriesItem type="line" data={seriesData} field="value" noteTextField="extremum" /> 

 

2) Color for different datapoint, I am trying to mark x and y from firebase. each x,y represents a hand or leg. I want each to be in separate color, How to implement that. again I have attached a JSON structure, refer screenshot 1.

[Stefan]

Hello, Goutham,

I made an example showcasing how to do both:

1) The extra information on hover can be shown using the ChartTooltip. The render prop of the Tooltip allows the developer to fully customize the text:

https://www.telerik.com/kendo-react-ui/components/charts/api/ChartTooltipProps/#toc-render

I see in the code snipped the use of noteTextField, but please have in mind that the note is shown all of the time, not only on hover:

https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/notes/

2) The different colors can be achieved by making two different ChartSeriesItem for the hands and the legs. If the data comes combined, we can suggest processing it locally after it is received from the server to make two collection.

This is the example:

https://stackblitz.com/edit/react-9cdq2k?file=app%2Fmain.jsx

The data structure can be seen in the scatter-line-data.json file.

I hope this is helpful.

Regards,
Stefan
Progress Telerik