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

Setting the tooltip style on bar charts.

Thread ID:

Created:

Updated:

Platform:

Replies:

125174 Jul 27,2016 03:25 PM UTC Jul 28,2016 09:48 AM UTC JavaScript 1
loading
Tags: ejChart
Robert David
Asked On July 27, 2016 03:25 PM UTC

Hello.

We have the ability to use the same datasource to redraw a chart style as lines, bars,stacked bars, area and stacked area. When we swap between lines, area and stacked area the tooltip draws the same way (full block of the series colour). When we switch to bars/stacked bars the tooltip draws differently and becomes a black bordered white-background tooltip.

Is there a way of incorporating the series colour into the tooltip?- I have attached a sample of my attempts- using #series.colour# in a simmilar way as the datapoints. 



http://jsplayground.syncfusion.com/r3qmh4lv

kinda regards.
Rob.

Attachment: toolTipBackGrounds_ff00837.rar

Saravana Kumar Kanagavel [Syncfusion]
Replied On July 28, 2016 09:48 AM UTC

Hi Robert, 
 
Thanks for contacting Syncfusion Support. 
We have analyzed your query. Generally chart types such as line, area, stacked area tooltip back ground color rendered with its corresponding series color but other type of charts like column, bar tooltip back ground color rendered with white. But you can customize the tooltip back ground and border color by using “toolTipInitialize” event as workaround. 
 
Please refer the code example below 
[JS] 
 
        $("#container").ejChart( 
        { 
            toolTipInitialize: "tooltipRendering" 
        }); 
 
        function tooltipRendering(sender) { //toolTipInitialize event triggered 
            if (sender.model.series[0].type == "bar") { 
                sender.model.series[0].tooltip.fill = sender.model.series[0].fill; 
                sender.model.series[0].tooltip.font = {}; 
                sender.model.series[0].tooltip.font.color = "white"; 
                sender.model.series[0].tooltip.border.color = "transparent"; 
            } 
        } 
In the above code, we are triggering “toolTipInitialize” event. In the event, we have applied the tooltip back ground color as series color and also changed the font and border color. 
 
We have also modified the sample for your reference and attached in the below location. 
 
  
And also please find the output of the sample below 
 
 
 
Please let us know if you have concern. 
 
Regards, 
Saravana Kumar K 


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

;