CODEWITHSUNDEEP
extjs4.1
Vitaly
Vitaly

Reputation: 310

Adding custom component to EXTJS chart

I need to add a small button to ExtJS 4 chart area to show/hide the legend. It should be directly on the chart canvas, not on extra panel outside of canvas.

Upvotes: 3

Views: 1436

Answers (1)

egerardus
egerardus

Reputation: 11486

I haven't had to do that specifically but I have had to do something similar.

You can't really add an ExtJS button to the chart canvas because anything on the canvas itself would have to be a drawn component. I suppose you could draw your own button...

But it's easier (and more uniform) to just add a text-sprite "Show Legend" and give it some listeners to make it behave buttonish (just like the way the built-in legend handles clicks). I.e. when you hover on it, it will go bold and when you click it you can show/hide the legend.

I don't have my other code but this should give you a rough idea:

var chart = Ext.create('Ext.chart.Chart', {
    style: 'background:#fff',
    theme: 'MyTheme',
    // other configs like axes and series...
    items: [{
        type: 'text', // i.e. a text sprite
        text: 'Show Legend',
        font: '14px Arial',
        x: 300, // left location
        y: 10, // top location
        listeners: {
            mouseover: function() {
                // make "Show Legend" bold
            },
            mousedown: function() {
                chart.legend = true;
                chart.redraw();
            }
        }
    }]
});

Upvotes: 2

Related Questions