Results 1 to 5 of 5

Thread: Need help: How to define the space between columns in a multicolumns chart

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

    Default Need help: How to define the space between columns in a multicolumns chart

    Hello everyone


    I created a chart with multicolumns, everything is fine except there is a big space between the two column 'data' and 'data1' in the chart


    Can someone tell me how to remove or reduce this space?


    Thanks


    Code:
    var store = Ext.create('Ext.data.JsonStore', {    
        fields: ['name', 'data', 'data1'],
        data: [
            { 'name': 'metric one',   'data':10, 'data1': 11 },
            { 'name': 'metric two',   'data': 7, 'data1': 10},
            { 'name': 'metric three', 'data': 5, 'data1': 9 },
            { 'name': 'metric four',  'data': 2, 'data1': 8},
            { 'name': 'metric five',  'data':27, 'data1': 6}
        ]
    });
    
    
    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 300,
        animate: true,
        store: store,
        axes: [
            {
                type: 'Numeric',
                position: 'left',
                fields: ['data'],
                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: [
            {
                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: {
                  display: 'insideEnd',
                  'text-anchor': 'middle',
                    field: 'data',
                    renderer: Ext.util.Format.numberRenderer('0'),
                    orientation: 'vertical',
                    color: '#333'
                },
                xField: 'name',
                yField: ['data', 'data1']
            }
        ]
    });

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    Did you check out the gutter config in the series?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Oct 2007
    Posts
    247
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Did you check out the gutter config in the series?
    where exactly do I check that?

    I am using EXTJS6 and need few more spaces between icons, this is on action column contains multiple actioncolumnitems within.

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    Quote Originally Posted by ByteLess View Post
    where exactly do I check that?

    I am using EXTJS6 and need few more spaces between icons, this is on action column contains multiple actioncolumnitems within.
    I think you are talking about a grid actioncolumn which is different than this thread. Please create a separate thread for your question.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Oct 2007
    Posts
    247
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    I think you are talking about a grid actioncolumn which is different than this thread. Please create a separate thread for your question.
    Sorry I overlooked.
    You are right, I am asking about the actioncolumn

Posting Permissions

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