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. Image for the cookie policy date

Setting the tooltip style on bar charts.


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. 


kinda regards.

Attachment: toolTipBackGrounds_ff00837.rar

1 Reply

SK Saravana Kumar Kanagavel Syncfusion Team 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 
            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. 
Saravana Kumar K 

Live Chat Icon For mobile
Up arrow icon