You found a bug! We've classified it as EXTJS-10754 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Location
    London
    Posts
    14
    Vote Rating
    0
    ozlemsimsek is on a distinguished road

      0  

    Cool Radar charts labelling issue

    Radar charts labelling issue


    Hello,

    I've been attempting to get two radar charts to work with flex layouts inside an hbox layout panel. I am using extjs 4.2.x . The problem is labels are not being accounted for in this layout and are truncated.

    I have included a test case for this here:
    http://jsfiddle.net/XWVaD/light/

    Does anyone know a way around this problem?

    Thanks,
    Ozlem

    *EDIT BY SLEMMON
    Issue observed in 4.1.0+.

    Inline test case:
    Code:
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1', 'data2', 'data3'],
        data: [{
            'name': 'metric one',
            'data1': 14,
            'data2': 12,
            'data3': 13
        }, {
            'name': 'metric two',
            'data1': 16,
            'data2': 8,
            'data3': 3
        }, {
            'name': 'metric three',
            'data1': 14,
            'data2': 2,
            'data3': 7
        }, {
            'name': 'metric four',
            'data1': 6,
            'data2': 14,
            'data3': 23
        }, {
            'name': 'metric five',
            'data1': 36,
            'data2': 38,
            'data3': 33
        }]
    });
    Ext.create('Ext.panel.Panel', {
        id: 'panelex',
        renderTo: Ext.getBody(),
        width: 800,
        height: 800,
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        border: 0,
        padding: 0,
        items: [{
            xtype: 'chart',
            flex: 1,
            animate: true,
            theme: 'Category2',
            store: store,
            axes: [{
                type: 'Radial',
                position: 'radial',
                label: {
                    display: true
                }
            }],
            series: [{
                type: 'radar',
                xField: 'name',
                yField: 'data1',
                showInLegend: true,
                showMarkers: true,
                markerConfig: {
                    radius: 5,
                    size: 5
                },
                style: {
                    'stroke-width': 2,
                    fill: 'none'
                }
            }, {
                type: 'radar',
                xField: 'name',
                yField: 'data2',
                showMarkers: true,
                showInLegend: true,
                markerConfig: {
                    radius: 5,
                    size: 5
                },
                style: {
                    'stroke-width': 2,
                    fill: 'none'
                }
            }, {
                type: 'radar',
                xField: 'name',
                yField: 'data3',
                showMarkers: true,
                showInLegend: true,
                markerConfig: {
                    radius: 5,
                    size: 5
                },
                style: {
                    'stroke-width': 2,
                    fill: 'none'
                }
            }]
        }, {
            xtype: 'chart',
            flex: 1,
            animate: true,
            theme: 'Category2',
            store: store,
            axes: [{
                type: 'Radial',
                position: 'radial',
                label: {
                    display: true
                }
            }],
            series: [{
                type: 'radar',
                xField: 'name',
                yField: 'data1',
                showInLegend: true,
                showMarkers: true,
                markerConfig: {
                    radius: 5,
                    size: 5
                },
                style: {
                    'stroke-width': 2,
                    fill: 'none'
                }
            }, {
                type: 'radar',
                xField: 'name',
                yField: 'data2',
                showMarkers: true,
                showInLegend: true,
                markerConfig: {
                    radius: 5,
                    size: 5
                },
                style: {
                    'stroke-width': 2,
                    fill: 'none'
                }
            }, {
                type: 'radar',
                xField: 'name',
                yField: 'data3',
                showMarkers: true,
                showInLegend: true,
                markerConfig: {
                    radius: 5,
                    size: 5
                },
                style: {
                    'stroke-width': 2,
                    fill: 'none'
                }
            }]
        }]
    });
    Last edited by slemmon; 24 Jul 2013 at 1:45 PM. Reason: additional test notes

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,470
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

    *This thread was moved to the Bugs forum from Q

Thread Participants: 1

Tags for this Thread