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

Instantiating a Chart

Page of 168

The Ext.chart.Chart class is responsible for rendering the chart container. You can display a chart by either invoking the Ext.chart.Chart constructor or by using xtype:chart with lazy instantiation.
Typically you will define the following configuration attributes:

Attribute Description
axes Array of Ext.chart.axis.Axis. Defines axis for charts. The axis position, type, style can be configured. The axes are defined in an axes array of configuration objects where the type, field, grid and other configuration options can be set.
legend Boolean/Object. Set to true for the default legend display or a legend config object. Defaults to false.
series Array of Ext.chart.series. Defines the type of chart to produce. Chart types include Area, Bar, Column, Line, Pie, Radar, and Scatter.
store The Ext.data.Store that will be used to supply data for the chart.

Instantiating your chart will typically follow the pattern illustrated below:

{
  xtype: 'chart'
  animate: true,
  store: store1,
  legend: { position: 'right' },
  axes: [ ...some axes options... ],
  series: [ ...some series options... ]
}
Page of 168
comments powered by Disqus