Results 1 to 6 of 6

Thread: Area Chart - Labels in series.

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    106
    Answers
    5

    Default Area Chart - Labels in series.

    Hello everyone!

    I need to add labels on my chart, but don't know how to do it.
    Since is a area chart, I'm passing an array into yField, and want to display a label for each item on it.

    Code:
    this.chart = Ext.widget('lineChart', {
                store: 'LossCause',
                animate: true,
    
    
                legend: {
                    position: Ext.os.is.Phone ? 'left' : 'top',
                    popup: Ext.os.is.Phone ? true : false
                },
    
    
                interactions: [
                    {
                        type: 'reset'
                    },
                    {
                        type: 'iteminfo',
                        gesture: 'tap',
                        panel: {
                            items: [
                                {
                                    docked: 'top',
                                    xtype: 'toolbar',
                                    title: 'Detalhes'
                                }
                            ]
                        },
                        listeners: {
                            'show': function (me, item, panel) {
                                panel.setHtml('<ul><li><b>Ano:</b> ' + item.storeItem.get('year') + '</li><li><b>Quebra Operacional: </b> ' + item.storeItem.get('quebraOperacionalBrasil') + '</li><li><b>Furto Interno: </b> ' + item.storeItem.get('furtoInternoBrasil') + '</li><li><b>Furto Externo: </b> ' + item.storeItem.get('furtoExternoBrasil') + '</li><li><b>Erro Administrativo: </b> ' + item.storeItem.get('erroAdministrativoBrasil') + '</li><li><b>Fornecedor: </b> ' + item.storeItem.get('fornecedorBrasil') + '</li><li><b>Outros Ajustes: </b> ' + item.storeItem.get('outrosAjustesBrasil') + '</li></ul>');
                            }
                        }
                    }
                ],
    
    
                axes: [{
                    type: 'Numeric',
                    grid: true,
                    position: 'left',
                    fields: ['quebraOperacionalBrasil', 'furtoInternoBrasil', 'furtoExternoBrasil', 'erroAdministrativoBrasil', 'outrosAjustesBrasil', 'fornecedorBrasil'],
                    title: '',
                    grid: {
                        odd: {
                            opacity: 1,
                            fill: '#ddd',
                            stroke: '#bbb',
                            'stroke-width': 1
                        }
                    },
                    minimum: 0,
                    adjustMinimumByMajorUnit: 0
                }, 
                {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['year'],
                    title: '',
                    grid: true,
                    label: {
                        rotate: {
                            degrees: 315
                        }
                    }
                }],
                series: [{
                    type: 'area',
                    axis: 'left',
                    xField: 'year',
                    yField: ['quebraOperacionalBrasil', 'furtoInternoBrasil', 'furtoExternoBrasil', 'erroAdministrativoBrasil', 'outrosAjustesBrasil', 'fornecedorBrasil'],
                    label: ['Brasil'],
                    style: {
                        opacity: 0.93
                    }
                }]
            });
    Thanks!

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449
    Answers
    3997

    Default

    You mean the label for the whole axis?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    21
    Answers
    2

    Default

    Quote Originally Posted by mitchellsimoens View Post
    You mean the label for the whole axis?
    That is something I'd be interested in. The axes labels don't seem to be working for me atm.

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449
    Answers
    3997

    Default

    The title config on the axis will be working in 2.1.0 b3, it's not working in 2.1.0 b2 as you will likely get a JS error
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Posts
    21
    Answers
    2

    Default

    Quote Originally Posted by mitchellsimoens View Post
    The title config on the axis will be working in 2.1.0 b3, it's not working in 2.1.0 b2 as you will likely get a JS error
    I can confirm the JS error Ok, thanks for the info.

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    106
    Answers
    5

    Default

    The label for each field, the labels that will appear on legends

Posting Permissions

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