View Full Version : Styling Chart Tooltips

20 Sep 2012, 11:59 AM
I am having trouble styling chart tooltips. The first tooltip that says "Help" is the standard non-chart tooltip, styled with the x-tip style. The second is the tooltip that appears when you rollover a chart sprite. I would like to stype the second tooltip to look like the first.

38818 38819

The code to add the tooptip to the chart is as follows:

tips: {
trackMouse: true,
anchorToTarget: true,
hideDelay: 0,
showDelay: 0,
width: 500,
height: 40,
border: '0',
renderer: function(storeItem, item){
// calculate percentage.
var total = 0;
total += rec.get("yData");
this.setTitle(Math.round(storeItem.get("yData") / total * 100) + '% ' + ' ' + storeItem.get("xData"));

Since the chart tooltips are rectangular sprites, can they be configured to the extent that the basic html tooltips are? It looks like the chart tooltip size is hard coded instead of variable depending on the length of the text. I tried leaving off the height and width, but this frequently caused to tooltip to be truncated.

I tried setting baseCls, bodyCls which seemed to be ignored. Setting the body color with this

bodyStyle: 'background-color : yellow',

resulted in only partially adding a background color, coloring only the bottom half of the tooltip rectangle.

Has anyone been successful at styling the chart tooltips, starting with background color? If so, can you paste example code? What are the limitations on styling chart tooltips?

22 Sep 2012, 3:15 PM
See if this helps:


14 Nov 2012, 6:58 AM
Is there anyway you can expose the suggestion. This thread is in the community section but the thread you are pointing to is in the premium and I am not an Ext JS Premium Member so I can not see the thread.

29 Jan 2013, 9:08 AM
I'd be interested too