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 gauge with titles

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?

Can you not just give the chart a `title` property? or is this not what ur looking for? — shane87, Jun 16 '11 at 14:45
i tried adding `title : 'my title'` but it didnt work :( cseems that hart doesnt have a title property — Armance, Jun 16 '11 at 14:49

score 14 · Accepted Answer · answered Sep 01 '11 at 22:22

14

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

answered Sep 01 '11 at 22:22

Gabriel Oliveira

790
8
19

1

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 – Armance Sep 23 '11 at 17:34
2

**Note:** For Ext JS 5, just rename the `items` config property to `sprites`. – Mr. Polywhirl Jun 22 '15 at 17:54

score 5 · Answer 2 · answered Jul 13 '11 at 08:36

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.

answered Jul 13 '11 at 08:36

Gerben Limburg

581
5
16

thanks, i tried it, i get **Uncaught TypeError: Cannot call method 'add' of undefined** on the `chart.surface.add(sprite);` – Armance Jul 13 '11 at 09:45
Is renderTo of your chart setted before you try to add the sprite? – Gerben Limburg Jul 13 '11 at 10:22
no.in fact i dont use render to, i just call my chart in my viewport when i need it – Armance Jul 13 '11 at 10:50
I'm afraid that is the problem. Can you try it with renderTo setted? – Gerben Limburg Jul 13 '11 at 11:00
1

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. – Gerben Limburg Jul 13 '11 at 11:32
@astrocybernaute let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/1406/discussion-between-gerben-limburg-and-astrocybernaute) – Gerben Limburg Jul 13 '11 at 11:33

score 0 · Answer 3 · answered Mar 16 '13 at 06:14

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

JDischler · Answer 4 · 2018-12-11T19:08:30.820

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

score 0 · Answer 5 · answered Jun 16 '11 at 15:16

0

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

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

answered Jun 16 '11 at 15:16

shane87

3,090
12
51
65

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 – Armance Jun 16 '11 at 15:21

Is it possible to add title to charts?

5 Answers5

Linked