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


Need help with a project? Contact us at sales@figleaf.com.
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:
Ext JS 6 Bootcamp
12/04/2017

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
   this.setTitle(storeItem.get('name'));
   
   // change panel body              
   this.update(
      Math.round(storeItem.get('data') / total * 100) + '%'
   );
  }
 },
 label: {
  field: 'name',
  display: 'rotate',
  contrast: true,
  font: '18px Arial'
 }
}]
Page of 168
comments powered by Disqus