Is it possible to add title to charts?

Question

I want to add a title to a chart, like in the gauge example or a pie chart. I want to display a title under or on top of the chart. Is this possible? I've been looking and can't find anything about this. if so , any tip to share? it would be something like this

EDIT: i found there is a property to create text sprites for the title or any labels at the Ex.draw package. but i couldnt understand how to use it..

anybdy here have done the same?

Answer 1

Since Ext.chart.Chart is an Ext.draw.Component, you can add sprites as items of it. Try to use this:

Ext.create('Ext.chart.Chart', {
   default chart settings here

   ...

   items: [{
      type  : 'text',
      text  : 'Simple Title',
      font  : '14px Arial',
      width : 100,
      height: 30,
      x : 50, //the sprite x position
      y : 10  //the sprite y position
   }]
})

Answer 2

You can simply add a sprite to the cart.surface:

var chart = Ext.create('Ext.chart.Chart', {
    ... default chart settings here ...
});
var sprite = Ext.create('Ext.draw.Sprite', {
    type: 'text',
    surface: chart.surface,
    text: 'Simple text',
    font: '12px Arial',
    x: 50,
    y: 0,
    width: 100,
    height: 100 
});
sprite.show(true);
chart.surface.add(sprite);

Hope it helps.

Answer 3

Just put your chart inside a panel with the title you need.

Ext.create('Ext.panel.Panel', {
    title: 'My Title',
    layout: 'fit',
    items: yourChart
});

Answer 4

Yes you can using Ext.chart.axis.Gauge. Inside items put an axis config with a title:

Ext.create('Ext.chart.Chart', {
   default chart settings here

   ...

   items: [{
                axes: [
                    {
                        position: 'gauge',
                        type: 'Gauge',
                        title: 'Net Pips',
                        maximum: 500,
                        minimum: 0
                    }
                ]
   }]
})

Answer 5

I'd recommend not using a sprite since you'll likely want the title centered. Any changes to the container size or your text length won't be automatically handled since the sprite approaches described in other answers here all hardcode the location. Centering with a sprite can be done with some effort but I'd consider leveraging the layout system. This way your page contents can automatically be positioned nicely when your page resizes.

// Use a vbox layout with whatever options you need
layout: {
    type: 'vbox',
    align: 'center'
},
items: [{
    type: 'container',
    html: 'My Title'
},{
    type: 'chart',
    flex: 1,
    // ...etc
}];