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 Axes

Page of 168

The Ext JS Charting package supports the following four types of chart axes:

  • Numeric axes representing quantitative information.
  • Category axes representing strings.
  • Time representing data occurring over a period of time
  • Gauge enables you to label positions on a Gauge series

Chart Axes support the following configuration properties:

Config Property Description
fields Array. The fields from the model to bind to the axis.
label Ext.chart.Label. The config for the chart label.
position String. Where to position the axis on the chart. Valid options include 'left','bottom','right', and 'top'
grid Boolean/Object. Enables you to set a alternating row colors for an axis.The possible values for a grid option are then true, false, or an object with { odd, even } properties where each property contains a sprite style descriptor object.
title String. The title for the axis.
minimum The minimum value to chart on the series.
maximum The maximum value that can be charted in the series.

A typical chart axes definition resembles the following:

{
 xtype: 'chart',
 store: 'store1',
 axes: [
  {
   type: 'Category',
   fields: ['label'],
   position: 'bottom', // x-axis
   title: 'Elected Representative'
  },
  {
   type: 'Numeric',
   fields: ['value'],
   position: 'left',
   title: 'Expenditures'
  }
 ]
}
Page of 168
comments powered by Disqus