Results 1 to 2 of 2

Thread: Problem with stacked bar chart total value overflowing (getting cut off)

  1. #1
    Sencha User
    Join Date
    Jul 2017
    Posts
    2
    Vote Rating
    0
      0  

    Default Problem with stacked bar chart total value overflowing (getting cut off)

    Hi,
    Using Ext JS 4.2.0.663
    I have a stacked bar chart inside a tab panel and for some values the total can get cut off at the top. See the following picture:
    Capture.PNG
    The picture isn't cut off, that's actually how it looks.

    Please if anyone has any clue of how to fix it I would be very grateful.

    Thank you so much

    Here is code to reproduce the issue:

    Code:
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data', 'data2'],
        data: [{
            'name': 'one',
            'data': 10,
            'data2': 1
        }, {
            'name': 'two',
            'data': 7,
            'data2': 1
        }, {
            'name': 'three',
            'data': 5,
            'data2': 1
        }, {
            'name': 'four',
            'data': 2,
            'data2': 1
        }, {
            'name': 'five',
            'data': 29,
            'data2': 1
        }]
    });
    
    
    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 300,
        animate: true,
        store: store,
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['data', 'data2'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
        }],
        series: [{
            stacked: true,
            type: 'column',
            axis: 'left',
            highlight: true,
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
                }
            },
            label: {
                stackedDisplay: "total",
                display: 'insideEnd',
                'text-anchor': 'middle',
                field: 'data',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'vertical',
                color: '#333'
            },
            xField: 'name',
            yField: ['data', 'data2']
        }]
    });
    Last edited by mikedombo; 6 Jul 2017 at 6:58 AM. Reason: add code

  2. #2
    Sencha User
    Join Date
    Jul 2017
    Posts
    2
    Vote Rating
    0
      0  

    Default

    I was able to solve my problem by adding "insetPadding: 20" to increase the padding from the default 10px to 20px.

Similar Threads

  1. [OPEN] Bar Chart with multiple series and stacked:false will create a stacked bar chart
    By ChrisWalker in forum Sencha Touch 2.x: Bugs
    Replies: 13
    Last Post: 18 Mar 2015, 12:10 PM
  2. Replies: 1
    Last Post: 30 Jan 2012, 7:21 AM

Tags for this Thread

Posting Permissions

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