Results 1 to 2 of 2

Thread: Radar charts labelling issue

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Location
    London
    Posts
    16

    Cool 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 User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

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

    *This thread was moved to the Bugs forum from Q

Tags for this Thread

Posting Permissions

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