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.
Unfortunately, activation email could not send to your email. Please try again.

tooltip for stackingchart

Thread ID:

Created:

Updated:

Platform:

Replies:

118462 Mar 10,2015 08:25 AM Mar 11,2015 03:21 AM JavaScript 1
loading
Tags: ejChart
kalpa serashiya
Asked On March 10, 2015 08:25 AM

thanks for reply,
Query about tooltip for stacking chart.
can we show tooltip as shown in attached Image.
common toolip for all series


Thanks

Attachment: tooltip_c7fc38e4.rar

Anandaraj T [Syncfusion]
Replied On March 11, 2015 03:21 AM

Hi Kalpa,

Thanks for using Syncfusion products.

We can achieve your requirement using template property of tooltip and toolTipInitialize event of Chart. Please refer the following code snippet to achieve this

<code>

[JS]

        //Event handler to modify the contents of tooltip template

        function tooltip(sender) {

            var pointIndex = sender.data.pointIndex;

            tooltipDiv.innerHTML = '<center> <b>' + sender.model.series[0].points[pointIndex].x + "</b> </center>";

            for (var i = 0; i < sender.model.series.length; i++)

                if (!sender.model.series[i].points[pointIndex].isEmpty)

                    tooltipDiv.innerHTML += sender.model.series[i].name + " : <b> " + sender.model.series[i].points[pointIndex].y + "</b><br/>";

            //Dynamically adding a div with customized content as tooltip template

            sender.data.currentText = tooltipDiv;

        }

        $(function () {

            $("#container").ejChart(

                      {

                          series: [{

                              . . . . .

                              //Using tooltip template to customize the appearance of chart tooltip

                              tooltip: { visible: true, template: '' }

                          },

                          . . . . . .

                          ],

                          //Event for rendering tooltip

                          toolTipInitialize: 'tooltip'

                      });

        });

</code>

We have also prepared a sample and it can be downloaded from the following link

http://www.syncfusion.com/downloads/support/directtrac/118462/TooltipTemplate919475127.zip

[Screenshot]

Stacking column with customized tooltip

Please let us know if you have any concern.

Regards,

Anandaraj



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.

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.

;