Hover and Color for each data point

2 posts, 1 answers
  1. Goutham
    Goutham avatar
    11 posts
    Member since:
    Jan 2021

    Posted 26 Jan Link to this post

    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.

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 27 Jan Link to this post

    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/.

Back to Top