1. Home
  2. Forum
  3. React - EJ 2
  4. Make a table at tooltip

Make a table at tooltip

I want to create a Chart using SyncFusion in React Functional Component. My data is as following :

Countries State wise Sales Breakdown

[

    {'India': [{ 'Delhi': 6 },{'Mumbai': 3 },{'Bengaluru': 7 },{'Chennai': 8 }]},

    {'USA': [{'New York': 2 },{ 'Boston': 6 },{ 'Texas': 5 }]},

    { 'Canada': [{ 'Ottawa': 0 },{ 'Toronto': 8 }]}

]


however the chart should show total sales along y vs countries :

[{'India': 24},{'USA': 13},{'Canada': 8}]


Something as shown below




However when we hover over the column it should show the breakup of the total value between various states at the tooltip. for e.g for India it should show  { 'Delhi': 6 },{'Mumbai': 3 },{'Bengaluru': 7 },{'Chennai': 8 } at the tooltip in the table format as shown below.




I couldn't find anything similar in Syncfusion Docs. Please provide a code snippet which does something similar in React Functional Component. 


Looking to hear back from SyncFusion Team Soon.


Thanks 

Randhir


3 Replies
DG Durga Gopalakrishnan Syncfusion Team June 21, 2022 02:30 PM UTC

Hi Randhir,
We suggest you to use load event to assign the sum values for chart series datasource and tooltipRender event to customize the tooltip text based on your requirement. Please check with the below snippet and sample.
load(args) {
     for(var i =0; i< args.chart.series.length; i++){
         var sum = 0;
         for(var j =0; j< args.chart.series[i].dataSource.length; j++)
            sum = sum + args.chart.series[i].dataSource[j].y;
         args.chart.series[i].dataSource = [{x: 'Countries', y:sum}];
       }
    } ;
    onTooltipRender(args){
        args.text = "";
       if(args.series.name == "Gold"){
           for(var i =0; i< data1.length; i++)
             args.text += data1[i].y + '<br>';
       }
       else if(args.series.name == "Silver"){
            for(var i =0; i< data2.length; i++)
                args.text += data2[i].y + '<br>';
       }
       else{
            for(var i =0; i< data3.length; i++)
                args.text += data3[i].y + '<br>';
       }
    };
Sample : https://stackblitz.com/edit/react-he8p6u
Kindly revert us if you have any concerns.
Regards,
Durga Gopalakrishnan.

RK Randhir Kumar Singh replied to Durga Gopalakrishnan June 22, 2022 05:49 AM UTC

Hello Durga,

Thanks for the quick response. A follow-up question why the 1st value in the tooltip seems to be selected

Please find the live demo link here : https://stackblitz.com/edit/react-he8p6u-uscgog?file=index.js

Also I need to change the style of tooltip to match this. Where do I set the tooltip style like font , color , background color and so on.



Looking forward to hear from you soon.


Thanks & BR

Randhir


DG Durga Gopalakrishnan Syncfusion Team June 23, 2022 01:52 PM UTC

Hi Randhir,

 

# 1 : why the 1st value in the tooltip seems to be selected

 

You can disable the marker for tooltip using enableMarker property. Please check with below snippet.

 

 tooltip={{              enable: true,              enableMarker: false}}

 

# 2 : Where do I set the tooltip style like font , color , background color and so on​

 

You can customize the chart series tooltip text using textStyle property and background using fill property. We have attached modified sample for your reference.

 

 tooltip={{              enable: true,

              fill:'lightgreen',

              textStyle :{ 

                    size:'14px', 

                   color:'red', 

                   fontStyle:'italic',       

                  fontFamily:'Segoe UI', 

                  fontWeight:'bold'

             }  

 }}

 

 

 

Kindly revert us if you have any concerns.

 

Regards,

Durga Gopalakrishnan.


Loader.
Up arrow icon