Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    66
    Vote Rating
    0
    dontbugme is on a distinguished road

      0  

    Default Bar Chart Highlight=true in Base Theme adds Borders (Chrome)

    Bar Chart Highlight=true in Base Theme adds Borders (Chrome)


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.0.5
    Browser versions tested against:
    • Chrome 13
    Description:
    • If a column series or bar series is configured with highlight=true and is using the Base theme, mousing over properly highlights the bar but on mouse out the bar gains a black border.
    Steps to reproduce the problem:
    • Run attached example in Chrome. Mouse over a bar and then mouse out. Note that it has gained a black border.
    The result that was expected:
    • No border should be added to un-highlighted items.
    The result that occurs instead:
    • Previously highlighted bar gained a black border.
    Test Case:


    Code:
    <html>
    <head>
    <title>Bar Chart Highlight=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: 'Base:gradients',
                store: store,
                legend: {
                    position: 'top'
                },            
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
                    title: 'Number of Hits',
                    grid: true
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month of the Year'
                }],
                series: [{
                    type: 'bar',
                    highlight: true,
                    xField: 'name',
                    yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
                    groupGutter: 0,
                    markerConfig: {
                        type: 'arrow',
                        size: 5
                    }
                }]
            }
        });
    });
    </script>
    </head>
    <body>
        
    </body>
    </html>





    HELPFUL INFORMATION
    This doesn't seem to be occurring in IE9 or FF4. It also does not seem to be happening with any other themes besides base.


    Screenshot or Video:

    barborderbug.jpg


    Note the yellow bar with the black border. It gained this border when I highlighted the bar but retained it when I moused away.

  2. #2
    Ext JS Premium Member
    Join Date
    Jul 2011
    Posts
    4
    Vote Rating
    2
    dharnig is on a distinguished road

      2  

    Default


    I'm on 4.0.6 and see this too.

    An extra oddity to the bug(or should I say an additional bug) is that you do not get this issue IF you have your chart set to 'animate: true'. On mouseOut the column/bar returns to normal without the black bar.

    A WORK AROUND SOLUTION: After some banging around I found that the 'lineWidth' attribute is the one property you need to set in your style in order to have a default value to go back to.

    Code:
    series:[
        {
            type: 'column',
            axis: 'left',
            style:{
                fill: '#F8933C',
                lineWidth: 0 /* <----------- KEY TO FIX ****/
            },
            highlight: {
                stroke:'#0B59A2',
                opacity: 0.8,
                lineWidth: 1
            },
            xField: 'startTime',
            yField: 'sizeInBytes'
        }
    ]
    I added that to my chart definition.

    With your extra info about it being isolated to the base template maybe just adding the lineWidth property in the series object in the Base.js template file would help.

  3. #3
    Sencha User
    Join Date
    Feb 2015
    Posts
    1
    Vote Rating
    0
    harmandeep is on a distinguished road

      0  

    Default Thanks

    Thanks


    great its working .

Thread Participants: 2