Results 1 to 7 of 7

Thread: Pie Chart Legend is only showing chart title

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    1

    Default Pie Chart Legend is only showing chart title

    The pie chart legend is showing the same text for every category, specifically whatever text I put in the chart title. How can I get the legend to correctly show the category name? Also, you'll notice the labels are not centered, but I don't really care for my purposes. I don't want the labels; I just added them to demonstrate the problem.

    Screen Shot 2012-07-16 at 3.27.04 PM.png

    Code:
                        series: [
                            {
                                type: 'pie',
                                label: {
                                    field: 'category',
                                    display: 'rotate',
                                    contrast: true,
                                    font: '12px Arial'
                                },
                                showInLegend: true,
                                title: 'Blood Glucose Summary',
                                angleField: 'percent',
                                colorSet: [
                                    '#FF840F',
                                    '#FFAE61',
                                    '#65A227',
                                    '#E27771',
                                    '#EB2B1F'
                                ]
                            }
                        ],
                        legend: {
                            boxStrokeWidth: 0,
                            position: 'right'
                        }
    [rant] it appears this may be related to recent changes to ExtJS. This seems to be a recurring issue with ExtJS 4.1 For one, even your demos aren't using the current syntax (for example, on the pie chart demo you are still using the 'field' attribute which apparently no longer exists; it's now 'angleField'). Second, all the great examples littered on this site, SO and the rest of the web no longer work (e.g. to assign custom colors to a pie chart you now use 'colorSet' instead of 'styles'). It's been a frustrating experience trying to prototype our application with documentation/samples that are no longer applicable. [/rant]

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Please send a working example so we can review, as I do not see this behavior.

    As for the field .. per the API:

    field : String
    Alias for angleField.
    Scott.

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2010
    Location
    Luxembourg
    Posts
    241
    Answers
    3

    Default

    Hello,

    I have the same behaviour...
    If I set the title property of the serie (Ext.chart.series.Pie), the legend use that value to display for each.
    If not set, the legend show the "field" property of the label object (Ext.chart.series.Series)

    Regards
    ps: extjs 4.1.1

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    30

    Default

    This still seems to be the case in 4.2.2 :
    Code:
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [
            { 'name': 'metric one',   'data': 10 },
            { 'name': 'metric two',   'data':  7 },
            { 'name': 'metric three', 'data':  5 },
            { 'name': 'metric four',  'data':  2 },
            { 'name': 'metric five',  'data': 27 }
        ]
    });
    
    
    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 350,
        animate: true,
        store: store,
        theme: 'Base:gradients',
         legend : {},
        series: [{
            type: 'pie',
            angleField: 'data',
            showInLegend: true,
            title:'test',
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function(storeItem, item) {
                    // calculate and display percentage on hover
                    var total = 0;
                    store.each(function(rec) {
                        total += rec.get('data');
                    });
                    this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
                }
            },
            highlight: {
                segment: {
                    margin: 20
                }
            },
            label: {
                field: 'name',
                display: 'rotate',
                contrast: true,
                font: '18px Arial'
            }
        }]
    });

  5. #5
    Sencha User palakurthivishal's Avatar
    Join Date
    Jul 2013
    Location
    India
    Posts
    74
    Answers
    8

    Default

    Hello dhorions,
    Don't assign a value to title attribute and check if it works. Like this,
    Code:
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [
            { 'name': 'metric one',   'data': 10 },
            { 'name': 'metric two',   'data':  7 },
            { 'name': 'metric three', 'data':  5 },
            { 'name': 'metric four',  'data':  2 },
            { 'name': 'metric five',  'data': 27 }
        ]
    });
    
    
    
    
    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 350,
        animate: true,
        store: store,
        theme: 'Base:gradients',
         legend : {},
        series: [{
            type: 'pie',
            angleField: 'data',
            showInLegend: true,
            //title:'test',
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function(storeItem, item) {
                    // calculate and display percentage on hover
                    var total = 0;
                    store.each(function(rec) {
                        total += rec.get('data');
                    });
                    debugger;
                    this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
                }
            },
            highlight: {
                segment: {
                    margin: 20
                }
            },
            label: {
                field: 'name',
                display: 'rotate',
                contrast: true,
                font: '18px Arial'
            }
        }]
    });

  6. #6
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    30

    Default

    I realize it works if you don't set a title attribute.
    The issue is that it does not work when the title attribute is set. To me that looks like undesired behavior.

    Not setting a title is a workaround I can live with, but it's not ideal.

  7. #7
    Sencha Premium User
    Join Date
    Aug 2012
    Posts
    70

    Default

    But how can I custom pie chart legend without title config?

Posting Permissions

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