Results 1 to 2 of 2

Thread: Remove padding from chart (type column / stacked)

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
      0  

    Default Remove padding from chart (type column / stacked)

    I've been trying to make a very simplistic Ext chart for the better part of the day, and whilst the charts api seems well documented and quick to use, I have become stumped on implementing my stacked bar chart effectively.

    I am trying to make a stacked bar chart with no axis, with text centred inside the bars of a singular stacked bar which takes up a set amount of space.

    However the text always appears to not centre inside the bar and the stacked bar chart appears to have padding on either side of it, which I can not seem to be able to remove.

    I am trying to make the width of the graph level with the ext buttons, however some left padding is causing this to not happen, any help would be much appreciated... Please find code below

    toSend.jpg

    Code:
        var exampleStore = Ext.create('Ext.data.JsonStore', {
                fields: ['veryLowName', 'lowName', 'okName', 'highName', 'veryHighName', 'veryLow', 'low', 'ok', 'high', 'veryHigh'],
                data: [
                    {
                        veryLowName: 'very Low',
                        lowName: 'low',
                        okName: 'ok',
                        highName: 'high',
                        veryHighName: 'veryHigh',
                        veryLow: 34000000,
                        low: 23890000,
                        ok: 18450000,
                        high: 20060000,
                        veryHigh: 20060000
                    }
                ]
            });
    
    
            var colors = [
    
    
                'rgb(255, 165, 0)',
                'rgb(255, 140, 0)',
                'rgb(127, 255, 47)',
                'rgb(255, 215, 0)',
                'rgb(255, 255, 0)'
    
    
            ];
    
    
            Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
                constructor: function (config) {
                    Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
                        colors: colors
                    }, config));
                }
            });
    
    
            var chart = Ext.create('Ext.chart.Chart', {
                width: baseWidth,
                height: baseHeight,
                animate: true,
                theme: 'Browser:gradients',
                shadow: true,
                store: exampleStore,
                series: [{
                    type: 'column',
                    width: baseWidth,
                    showInLegend: true,
                    yField: ['veryLow', 'low', 'ok', 'high', 'veryHigh'],
                    stacked: true,
                    tips: {
                        trackMouse: true,
                        width: 65,
                        height: 28,
                        renderer: function (storeItem, item) {
                            this.setTitle(String(item.value[1] / 1000000) + '%');
                        }
                    },
                    label: {
                        field: ['veryLowName', 'lowName', 'okName', 'highName', 'veryHighName'],
                        display: 'middle',
                        contrast: true,
                        font: '18px Arial'
                    }
                }]
            });
            /*
            chart.legend = {
                position: 'left'
            };
              */
    
    
    
    
            me.monitorPanel = new Ext.Panel({
                width: baseWidth,
                height: 600,
                items:
                    [
                        me.dateTimeCombobox,
                        me.buttonMenu,
                        chart
                    ]
            });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

    Default

    You will have to inspect your text in element inspector to get the correct CSS to modify.

    Regards,
    Scott

Posting Permissions

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