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?

Meyerbeer

Can you not just give the chart a title property? or is this not what ur looking for? – Manhandle

i tried adding title : 'my title' but it didnt work :( cseems that hart doesnt have a title property – Meyerbeer

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

Hierarchize

thanks a lot,this helped me a lot, but im wondering if u know of a way to make the x and y dynamic, like anchor for example, so when we change the size of the panel/window they will also move acordinally..do u get me? let me know if i need to explain more – Meyerbeer

Note: For Ext JS 5, just rename the items config property to sprites. – Introjection

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.

Jock

thanks, i tried it, i get Uncaught TypeError: Cannot call method 'add' of undefined on the chart.surface.add(sprite); – Meyerbeer

Is renderTo of your chart setted before you try to add the sprite? – Jock

no.in fact i dont use render to, i just call my chart in my viewport when i need it – Meyerbeer

I'm afraid that is the problem. Can you try it with renderTo setted? – Jock

as far as I can see, yes. Than there is no surface and therefore you can add nothing. But I might be wrong. I didn't build Ext. – Jock

@astrocybernaute let us continue this discussion in chat – Jock

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

Equate

Answer 4

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

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

Manhandle

not what i meant, not title in the header of the panel i have that, but inside the panel right in the top or under the chart,cause in one panel i could have several charts like in the gauge example i mentionned in my question and i want to put a title for each one – Meyerbeer

Answer 5

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

Faints