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
    12
    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
    4,893
    Vote Rating
    175
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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