Click to search on your search term.
Subscribe to Fig Leaf Tutorials

Need help with a project? Contact us at
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:

Adding Tooltips to Charts

Page of 168
Pie chart with Tooltip

The Ext.chart.Tip class provides tooltips for chart series. However, the configuration properties are actually inherited from the Ext.tip.Tooltip class.

Tooltips are essentially stylized floating panels, so you can use the Ext.panel.Panel.setTitle() and Ext.panel.Panel.update() methods to dynamically set the panel contents as illustrated by the following code snippet:


series: [{
 type: 'pie',
 angleField: 'data',
 showInLegend: true,
 highlight: {
  segment: { margin: 20 }
 tips: {
  trackMouse: true,
  width: 140,
  height: 50,
  renderer: function(storeItem, item) {
   // calculate and display percentage on hover
   var total = 0;
   store.each(function(rec) {
    total += rec.get('data');
   // change panel header
   // change panel body              
      Math.round(storeItem.get('data') / total * 100) + '%'
 label: {
  field: 'name',
  display: 'rotate',
  contrast: true,
  font: '18px Arial'
Page of 168
comments powered by Disqus