This is a migrated thread and some comments may be shown as answers.

Hover and Color for each data point

1 Answer 395 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Goutham
Top achievements
Rank 1
Veteran
Goutham asked on 27 Jan 2021, 12:15 AM

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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 27 Jan 2021, 07:58 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Goutham
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Share this question
or