Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    66
    Vote Rating
    0
    dontbugme is on a distinguished road

      0  

    Default Bar Chart Bars are Disconnected from X Axis When column=true

    Bar Chart Bars are Disconnected from X Axis When column=true


    REQUIRED INFORMATION
    Ext version tested:
    • Ext 4.0.5
    Browser versions tested against:
    • Chrome 12
    • FF4
    • IE9
    Description:
    • Setting column=true on a bar series correctly rotates the series to look like a column series, but the bottoms of the bars do not touch the x axis.
    Steps to reproduce the problem:
    • Run the attached example
    The result that was expected:
    • Bar series should be oriented like a column series and bars should connect with the x axis.
    The result that occurs instead:
    • Bars are disconnected from the x axis.
    Test Case:
    Code:
    <html>
    <head>
    <title>Bar Chart Column=true Bug</title>
    <link rel="stylesheet" type="text/css" href="ext-4.0.5/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-4.0.5/bootstrap.js"></script>
    <script type="text/javascript">
        Ext.require(['*']);
    Ext.onReady(function () {
    
    
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
        data: [
            {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
            {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
            {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
            {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
            {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}                                                
        ]
    });
    
    
        var win = Ext.create('Ext.Window', {
            width: 800,
            height: 600,
            hidden: false,
            maximizable: true,
            title: 'Mixed Charts',
            renderTo: Ext.getBody(),
            layout: 'fit',
            items: {
                id: 'chartCmp',
                xtype: 'chart',
                style: 'background:#fff',
                animate: true,
                theme: 'Category1',
                store: store,
                legend: {
                    position: 'top'
                },            
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data1', 'data2', 'data3'],
                    title: 'Number of Hits',
                    grid: true
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month of the Year'
                }],
                series: [{
                    type: 'bar',
                    column: true,
                    axis: 'left',
                    xField: 'name',
                    yField: 'data1',
                    markerConfig: {
                        type: 'arrow',
                        size: 5
                    }
                }]
            }
        });
    });
    </script>
    </head>
    <body>
        
    </body>
    </html>

    HELPFUL INFORMATION
    Screenshot or Video:Workaround

    Specify the series as a column series rather than a bar series.

  2. #2
    Sencha - Ext JS Dev Team marcelofarias's Avatar
    Join Date
    Nov 2011
    Posts
    12
    Vote Rating
    0
    marcelofarias is on a distinguished road

      0  

    Default


    You should set the `yPadding` configuration property to `0` so there's no padding on the column chart. Also, you're is using a private (non-documented -in purpose) configuration property `column`. For column series there's the Column class.

Thread Participants: 1