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\

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

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 3

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
}];

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

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.