Setting the tooltip style on bar charts.

[Robert David]

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]

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. 

 

Sample Link : http://www.syncfusion.com/downloads/support/forum/125174/ze/Sample1352603511 

  

And also please find the output of the sample below 

 

 

 

Please let us know if you have concern. 

 

Regards, 

Saravana Kumar K