PDA

View Full Version : chart - X axis title



stetou
26 Nov 2009, 10:19 AM
Perhaps it is obvious but I still can't assign a title to the X axis.
If possible, how can I do that please? Some code would be appreciated.
See image attached. People don't know what 44, 45, 46 and 47 are?
I would like a title over the legend

thanks
steve

Pada
3 May 2010, 6:40 AM
I know that this post is a couple of months old, but I feel that the following post of mine might help out others in need :)

You can specify the axis titles by specifying 'title' for 'xAxis' & 'yAxis'. You can then rotate the yAxis title by specifying 'titleRotation' in 'extraStyle'.

I'm using a Stacked Column Chart (which is in essence a vertical Stacked Bar Chart) to display the number of Visitors on my webpage. I'm using CategoryAxis for my xAxis, since its unordered, unlike the NumericAxis. If you have long labels on the X axis, you would also want to rotate them like I did in my example.

Here's my example:



var store = new Ext.data.JsonStore({
fields:['hour', 'new', 'old'],
data: [
{hour: 23, new:1, old: 0},
{hour: 0, new:0, old: 2},
{hour: 1, new:2, old: 0},
{hour: 2, new:10, old: 1},
{hour: 3, new:5, old: 2}
]
});

new Ext.Panel({
title: 'Visitors',
renderTo: 'container',
width:500,
height:200,
layout:'fit',

items: {
xtype: 'stackedcolumnchart',
store: store,
xField: 'hour',
xAxis: new Ext.chart.CategoryAxis({
title: 'Hours',
}),
yAxis: new Ext.chart.NumericAxis({
title: '# Visitors',
stackingEnabled: true
}),
series: [{
yField: 'new',
displayName: 'New'
},{
yField: 'old',
displayName: 'old'
}],
extraStyle: {
xAxis: {
labelRotation: -90
},
yAxis: {
titleRotation:-90
}
}
}
});