customize tooltip

[afiqdoherty]

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]

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]

Hi Kesavan ,

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

thanks :)

afiq

[Dharanidharan Dharmasivam]

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]

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]

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]

Hi Dharani,

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

[Dharanidharan Dharmasivam]

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]

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]

Hi Muhammad, 

 

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

 

Thanks, 

Dharani.