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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

tooltip for stackingchart

Thread ID:

Created:

Updated:

Platform:

Replies:

118462 Mar 10,2015 12:25 PM UTC Mar 11,2015 07:21 AM UTC JavaScript 1
loading
Tags: ejChart
kalpa serashiya
Asked On March 10, 2015 12:25 PM UTC

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 07:21 AM UTC

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.

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

;