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 Legends

Page of 168

Chart legends are generated from the Ext.chart.Legend class. Displaying a legend is quite helpful when outputting pie charts, line charts, or any chart where you are plotting multiple data series. Typically you will set the following configuration properties:

Config Property Description
labelColor String. Color of the legend labels, e.g. '#c0c0c0'
labelFont String. Font and font size of the legend labels, e.g. '10px Comic Sans MS'
position String. The position of the legend on the chart. Must be set to one of the following: 'top', 'bottom', 'left', 'right', or 'float.' Defaults to 'bottom.'
visible Boolean. Whether the legend should be displayed. Defaults to true.
x Number. If position is set to 'float', defines the x-position of the legend box.
y Number. If position is set to 'float', defines the y-position of the legend box.

The following code snippet illustrates a typical legend definition:

Ext.create('Ext.chart.Chart', {
 width: 500,
 height: 350,
 animate: true,
 store: store,
 legend: {
  visible:true,
  position: 'right',
  labelFont: '10px Comic Sans MS'
 },
 series: [{
   type: 'pie',
   angleField: 'data',
   showInLegend: true,
   label: {
    field: 'name',
    display: 'rotate',
    contrast: true,
    font: '18px Arial'
   }
 }]
});
Page of 168
comments powered by Disqus