Results 1 to 3 of 3

Thread: Maximum and Minimum value of Numeric Axis works weirdly for Stacked bar

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    5
    Vote Rating
    0
      0  

    Default Unanswered: Maximum and Minimum value of Numeric Axis works weirdly for Stacked bar

    Hi

    When i try to set minimum and maximum value , the stacked bar chart is not starting from minimum point and it is showing the bar out of chart axis.


    Works fine with minimum set to zero.

    Please find the screenshot for reference.





    Thanks
    Sai

  2. #2
    Sencha User
    Join Date
    Nov 2012
    Posts
    5
    Vote Rating
    0
      0  

    Default Sample code for reference

    var panel1 = Ext.create('widget.panel', {
    width: 600,
    height: 350,
    title: 'Stacked Bar Chart',
    renderTo: Ext.getBody(),
    layout: 'fit',
    x: 100,

    items: {
    xtype: 'chart',
    animate: true,
    theme: 'myTheme',
    shadow: true,
    store: store,
    legend: false,
    axes: [{
    type: 'Numeric',
    minimum: 10,
    maximum: 100,

    position: 'bottom',
    fields: ['HD', 'NIS','Oct','Green','Yellow','Red'],
    title: false,
    grid: false,
    label: {
    renderer: function(v) {
    return String(v);
    }
    },
    roundToDecimal: false
    }, {
    type: 'Category',
    position: 'left',
    fields: ['CE'],
    title: false
    }],
    series: [{
    type: 'bar',
    axis: 'bottom',
    gutter: 10,
    style: {color:0x6238A7, size:10},
    yField: ['HD', 'NIS'],
    xField: 'CE',

    /*renderer: function(sprite, record, attr, index, store) {
    var value = 0;
    var val =1;
    var color = ['red','blue'][value][val];
    return Ext.apply(attr, {
    fill: color
    });
    },*/
    stacked: true,
    tips: {
    trackMouse: true,
    width: 65,
    height: 28,
    renderer: function(storeItem, item) {
    this.setTitle(String(item.value[1]));
    }
    }
    },
    {
    type: 'scatter',
    axis: 'bottom',
    smooth: true,
    fill: false,
    fillOpacity: 0.5,
    xField: 'Green',
    yField: ['CE'],
    tips: {
    trackMouse: true,
    width: 80,
    height: 40,
    renderer: function(storeItem, item) {
    this.setTitle(storeItem.get('CE'));
    this.update(storeItem.get('Green'));
    }
    },
    markerConfig: {
    type: 'circle',
    size: 4,
    radius: 10,
    'stroke-width': 0,
    fill: 'green',
    stroke: '#38B8BF'
    }
    },
    {
    type: 'scatter',
    axis: 'bottom',
    smooth: true,
    fill: false,
    fillOpacity: 0.5,
    xField: 'Yellow',
    yField: 'CE',
    tips: {
    trackMouse: true,
    width: 80,
    height: 40,
    renderer: function(storeItem, item) {
    this.setTitle(storeItem.get('CE'));
    this.update(storeItem.get('Yellow'));
    }
    },
    markerConfig: {
    type: 'customMarkerB',
    size: 4,
    radius: 10,
    'stroke-width': 0,
    fill: 'yellow',
    stroke: '#38B8BF'
    }
    },
    {
    type: 'scatter',
    axis: 'bottom',
    smooth: true,
    fill: false,
    fillOpacity: 0.5,
    xField: 'Red',
    yField: ['CE'],
    tips: {
    trackMouse: true,
    width: 80,
    height: 40,
    renderer: function(storeItem, item) {
    this.setTitle(storeItem.get('CE'));
    this.update(storeItem.get('Red'));
    }
    },
    markerConfig: {
    type: 'cross',
    size: 4,
    radius: 10,
    'stroke-width': 0,
    fill: 'red',
    stroke: '#38B8BF'
    }
    }]
    }
    });
    });

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    5
    Vote Rating
    0
      0  

    Default Please confirm whether there is any bug in Ext JS causing issue with the stacked bar

    Please confirm whether there is any bug in Ext JS causing issue with the stacked bar

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •