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

Configuring Chart Labels

Page of 168

Chart series labels are instances of the Ext.chart.Label class. The label configuration property of this class enables you to set the following properties:

Config Property Description
display String. Specifies the presence and position of labels for each chart series item or axis label. Valid options include 'rotate', 'middle', 'insideStart', 'insideEnd', 'outside', 'over', 'under', or 'none.' Defaults to 'none'
color String. The color of the label text, defaults to '#000'
contrast Boolean. True to render the label in contrasting color with the background.
field String. The name of the field to be displayed in the label.
font The font to use for the label. Defaults to '11px Helvetica, sans-serif'
rotate Object. Supports one property named degrees that enables you rotate the label.
renderer Function. Optional function for formatting the label into a displayable value.
Default value: function(v) { return v; }

The following code snippet illustrates formatting the axis labels as depicted in the figure below:

Formatting axis labels

{
 xtype: 'chart',
 store: 'store1',
 axes: [
  {
   type: 'Category',
   fields: ['label'],
   position: 'bottom', // x-axis
   title: 'Elected Representative',
   label: {
    rotate: {
     degrees: 45
    },
    renderer: function(s) {
     return Ext.String.ellipsis(s,10);    
    }
   }
  },
  {
   type: 'Numeric',
   fields: ['value'],
   position: 'left',
   title: 'Expenditures',
   label: {
     renderer: Ext.util.Format.usMoney
   },
  }
 ]
}
Page of 168
comments powered by Disqus