Results 1 to 2 of 2

Thread: Add Title in Pie Chart

  1. #1

    Default Add Title in Pie Chart

    I want to know how i can add the title in the pie chart, i did not find any option no where just legend but i need to put title differently and legends differently.. below is my chart code

    var avgworkchart = Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    flex: 9,
    animate: true,
    itemId: 'avgworkchart',
    store: trabalhoStore,
    title: 'Tempo Movimento em Madrugada, Dia e Noite',
    grid: true,
    theme: 'Base:gradients',
    legend: {
    position: 'right'
    },
    series: [{
    type: 'pie',
    field: 'data1',
    showInLegend: true,
    donut: donut,
    tips: {
    trackMouse: true,
    width: 200,
    height: 50,
    renderer: function(storeItem, item) {
    var total = 0;
    trabalhoStore.each(function(rec) {
    total += rec.get('data1');
    });
    this.setTitle(storeItem.get('name') + ' : ' + Math.round(storeItem.get('data1') / total * 100) + " % "
    + '</b><br/>' + storeItem.get('name') + ' : ' + storeItem.get('data1'));
    }
    },
    highlight: {
    segment: {
    margin: 20
    }
    },
    label: {
    field: 'name',
    display: 'rotate',
    contrast: true,
    font: '18px Arial'
    }
    }]
    });

  2. #2
    Sencha Premium User vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    811

    Default

    Just use a sprite for the title and draw it in the the chart's redraw method, sth like:
    Code:
    Ext.define('MyPie', {
            extend: 'Ext.chart.Chart',
    
    
            redraw: function () {
                this.callParent();
    
    
                this.redrawTitleSprite();
            },
    
    
            redrawTitleSprite: function () {
                var me = this,
                    chartBBox = me.chartBBox,
                    titleLabel = me.titleLabel,
                    bbox;
    
    
    
    
                if (!titleLabel) {
                    titleLabel = me.surface.add({
                        type: 'text',
                        'text-anchor': 'center',
                        fill: '#666666',
                        font: 'bold 12px .',
                        text: 'Pie chart title',
                        zIndex: 5,
                        x: 0,
                        y: chartBBox.y + chartBBox.height,
                        style: {
                            "text-transform": "uppercase"
                        }
                    }).redraw();
    
    
    
    
                    me.titleLabel = titleLabel;
                }
    
    
                bbox = titleLabel.getBBox();
    
    
    
    
                titleLabel.setAttributes({
                    x: chartBBox.x + (chartBBox.width / 2 - bbox.width / 2),
                    y: chartBBox.y + chartBBox.height + bbox.height + 25 // 25 padding
                }, true);
            }
    });
    Github https://github.com/vadimpopa
    Blogging @ : http://vadimpopa.com
    Twitter: @vadimvpopa

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
  •