Results 1 to 2 of 2

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

  1. #1

    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


        var exampleStore = Ext.create('', {
                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.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,

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Houston, Tx


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


Posting Permissions

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