View Full Version : "majorTickSteps" Not Rendering Correctly

10 Apr 2012, 10:20 AM
I am using EXT JS 4.0.7.

I am trying to build a matrix (4 quadrants) by using a Scatter Chart.

The dots are plotting different projects' KPI's. The minimum of each axis is 0 and the maximum is 2, I just want a grid line (tick mark) at "1" on each axis so that the grid effectively makes a square with 4 quadrants.

When I put "majorTickSteps: 1" ZERO tick marks (between the minimum and max) are rendered. When I put majorTickSteps: 2, two tick marks are rendered between the min and max; majorTickSteps: 3, three ticks are rendered, etc.Why is it that I can't get just one tick mark between the min and max to render?

majorTickSteps: 133830

majorTickSteps: 233832

Here is the code:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Grouped Column Chart</title>
<link rel="stylesheet" type="text/css" href="Layouts/1033/styles/perf/extjs/ext-all.css" />
<script type="text/javascript" src="Layouts/1033/scripts/perf/extjs/ext-all-debug.js"></script>

<body id="docbody">
<h1>Scatter Renderer Example</h1>
<div style="margin: 10px;">
<div id="scatterChart">
Display data in a scatter series.

<script language="javascript">
Ext.onReady(function () {

var store1 = Ext.create('Ext.data.JsonStore', {
fields: ['projectName', 'CPI', 'SPI', 'budget'],
data: [
{ 'projectName': 'Building Construction', 'CPI': 1.02, 'SPI': 1.19, 'budget': 143743753},
{ 'projectName': 'Roads', 'CPI': 0.76, 'SPI': 1.06, 'budget': 55168791},
{ 'projectName': 'Community Center', 'CPI': 0.88, 'SPI': 0.60, 'budget': 22563723},
{ 'projectName': 'Land Clearning', 'CPI': 1.10, 'SPI': 0.55, 'budget': 17086766},
{ 'projectName': 'Zoo', 'CPI': 1.21, 'SPI': 1.56, 'budget': 15712469},
{ 'projectName': 'Shopping Center', 'CPI': 1.34, 'SPI': 1.29, 'budget': 11676132}

var panel1 = Ext.create('widget.panel', {
width: 800,
height: 600,
hidden: false,
maximizable: true,
title: 'CPI/SPI Matrix',
renderTo: 'scatterChart',
layout: 'fit',
items: {
id: 'chartCmp',
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: store1,
insetPadding: 50,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['CPI'],
minimum: 0,
maximum: 2,
majorTickSteps: 1,
minorTickSteps: 1,
grid: true,
title: 'CPI'
}, {
type: 'Numeric',
position: 'bottom',
fields: ['SPI'],
minimum: 0,
maximum: 2,
majorTickSteps: 1,
minorTickSteps: 1,
grid: true,
title: 'SPI'
series: [{
type: 'scatter',
xField: 'SPI',
yField: 'CPI',
color: '#ccc',
markerConfig: {
type: 'circle',
radius: 20,
size: 20


11 Apr 2012, 8:08 AM
-bump- Any ideas??? I feel like this should be an easy thing to do.

5 Aug 2012, 10:45 PM

Did you get any solution on this? Iam trying to implement the same but in sencha touch charts.


6 Aug 2012, 1:11 AM

I think it is the related to this Bug ticket.