We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

customize tooltip

Thread ID:

Created:

Updated:

Platform:

Replies:

141988 Jan 14,2019 08:10 AM UTC Jan 22,2019 06:06 AM UTC ASP.NET Core - EJ 2 9
loading
Tags: Charts
afiqdoherty
Asked On January 14, 2019 08:10 AM UTC

Hi, appreciate if you can help me to customize the tooltip color. please find attached image for your perusal.



below is my code.

<ejs-accumulationchart id="container0" load="load" height="170" center="piecenter">
                            <e-accumulationchart-tooltipsettings enable="true"></e-accumulationchart-tooltipsettings>
                            <e-accumulationchart-legendsettings visible="false">
                            </e-accumulationchart-legendsettings>
                            <e-accumulation-series-collection>
                                <e-accumulation-series dataSource="ViewBag.dataSource_Manifest_Public" xName="xValue" yName="yValue" name="Channel Count" explodeIndex="0" radius="100%" explode="true" explodeOffset="10%">
                                    <e-accumulationseries-datalabel name="text" visible="true">
                                        <e-font fontWeight="600" color="white"></e-font>
                                    </e-accumulationseries-datalabel>
                                </e-accumulation-series>
                            </e-accumulation-series-collection>
                        </ejs-accumulationchart>


thanks
 afiq

Kesavan Muthusamy [Syncfusion]
Replied On January 14, 2019 12:03 PM UTC

Hi Afiq, 
Greetings from Syncfusion. 
We have analyzed your query. Currently we don't have options for customizing that marker color in tooltip. We have locked this as an improvement and We will provide this improvement in any of the upcoming patch release. 
 
Regards, 
Kesavan 


afiqdoherty
Replied On January 15, 2019 01:48 AM UTC

Hi Kesavan ,

noted, thanks for the info. if that's so...can I disable the circle icon? 

thanks :)

afiq

Dharanidharan Dharmasivam [Syncfusion]
Replied On January 16, 2019 10:58 AM UTC

Hi Muhammad, 
 
We have analyzed your query. As a workaround, you can set the style of the marker element’s visibility to be hidden. So, that the marker will get hidden. Find the code snippet below to achieve this requirement. 
 
 
<ejs-accumulationchart id="piecontainer"> 
</ejs-accumulationchart> 
 
<style> 
    #piecontainer_tooltip_Trackball_0 { 
        visibility: hidden; 
    } 
</style> 
 
 
Kindly make sure the highlighted id should be same, so that only marker of tooltip will be hidden. 
 
Screenshot: 
 
Hope this helps you. 
 
Thanks, 
Dharani. 


afiqdoherty
Replied On January 17, 2019 03:55 AM UTC

Hi Dharani,

thanks for the solution, it's working :D. But, i have another question. please refer below image. thanks



i need to display the figure in full digits. Plus, can I hide the 0.00 value from the pie chart?just display value more than 0.00.

Thanks,

afiq

Dharanidharan Dharmasivam [Syncfusion]
Replied On January 17, 2019 11:09 AM UTC

Hi Muhammad, 
 
We have analyzed your query. We would like to let you know that, when there is no space to render the entire label, the label will get trimmed and when hover over the trimmed label, tooltip will be visible. This is our default behavior. In your case, since you don’t need to have the label 0.00, then we can hide then in textRender event, so that another label will get displayed. Find the code snippet below to achieve this. 
 
 
<ejs-accumulationchart id="piecontainer" textRender="textRender"> 
</ejs-accumulationchart> 
 
function textRender(args) { 
        args.cancel = args.point.y === 0.00; 
    } 
 
 
Screenshot:  
 
Here we have cancelled the event when the values is 0.00, so that the label will not be rendered. 
 
Thanks, 
Dharani.  


afiqdoherty
Replied On January 18, 2019 04:21 AM UTC

Hi Dharani,

thanks for the reply but the script given is not working. 0.00 value still appear on my pie chart.



Dharanidharan Dharmasivam [Syncfusion]
Replied On January 18, 2019 04:46 AM UTC

Hi Muhammad, 
 
We have analyzed further but in our end the value with 0.00 got hidden.Since we are not aware on your exact scenario in which the reported issue occurs, kindly revert us by modifying the sample or provide your code snippet with your data source. If possible, share your sample with replication steps. This will be much helpful in further analysis and provide you the solution sooner. 
 
Thanks, 
Dharani. 


afiqdoherty
Replied On January 22, 2019 03:45 AM UTC

Hi, 

i did a little change as per below on the given solution and now it's working fine. Thank :)

<ejs-accumulationchart id="piecontainer" textRender="textRender"> 
</ejs-accumulationchart> 
 
function
 textRender(args) { 
        //args.cancel = args.point.y === 0.00; 
       //change to
        args.cancel = args.text === "0.00";
}



regards,

Afiq

Dharanidharan Dharmasivam [Syncfusion]
Replied On January 22, 2019 06:06 AM UTC

Hi Muhammad, 
 
Thanks for the information. Kindly get in touch with us, if you could require further assistance. 
 
Thanks, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;