View Full Version : ExtJs 4.1 Chart scroll out problem

31 May 2012, 10:53 PM
Hi i am using bar chart to counting items per month. But when i dont give maximum property to axes
the bar is scroll out the border. And the scrolled part doesnt shown .
?s it a bug or i do somethink wrong ??
The screenshot is below

1 Jun 2012, 2:04 AM
forgaet to add code

var barChart = Ext.create('Ext.chart.Chart', { flex: 1,
xtype: 'chart',
shadow: true,
animate: true,
store: chartStore,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['count'],
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['date'],
label: {
renderer: function(v) {
return Ext.String.ellipsis(v, 15, false);
font: '9px Arial',
rotate: {
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
style: {
fill: '#456d9f'
highlightCfg: {
fill: '#a2b5ca'
label: {
contrast: true,
display: 'insideStart',
field: 'count',
color: '#000',
orientation: 'horizonal',
'text-anchor': 'middle'
tips: {
trackMouse: true,
width: 250,
height: 30
xField: 'date',
yField: ['count']

1 Jun 2012, 3:29 AM
This is a problem with layout and the parent container. Your chart appears to have flex: 1, which means the parent container is using an hbox or vbox layout. I also noticed that you have a hard-coded height: 300 on your chart. The fixed height might be conflicting with what you're wanting to achieve, in terms of the parent container's layout...

1 Jun 2012, 4:28 AM
thanks for reply..
actuallay i write it outside of ontainer but the same err. is happening.
but when i use the chartStore.loadData(myData) with static data it work properly . but with dynamic data it does not.

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
xtype: 'chart',
shadow: true,
animate: true,
store: chartStore,
width: 500,
height: 300,
axes: [{

1 Jun 2012, 11:26 PM
is there any way to add the store jsondata to the array ??

4 Jun 2012, 12:24 AM
Hi i've solved the problem .
Remove the root data form recieved data anda bind it with loadData() . so it work properly.
send the data to json.php with ajax conn.

the codes are bellow...

url: 'my_JSON.php?Chart=chart1',
params: {
date: date
success: function(response, opts) {
var obj = Ext.decode(response.responseText);