Search code examples
extjsextjs5extjs-chart

Extjs 5 Chart Legend Issue

I am trying to add a legend to my extjs 5 charts and it doesn't appear to work. Is this a bug or am I doing something wrong?

legend: {  
    docked: 'top',
    style: {
         borderColor: 'red',
         borderStyle: 'solid'
    }
}
Solution

  • I had been working on this same issue for a while - and finally submitted a Sencha Bug Report:

    http://www.sencha.com/forum/showthread.php?289279-Sencha-5-Charts-Broken-Legend

    Long story short, there's "supposedly" a fix in the next EXTjs rollout. Unfortunately, that doesn't help us now...

    You can however, create a tpl for the legend - but my tpl isn't quite as robust as the native extjs legend. It will still show/hide the series, but doesn't mask the series in the legend. I'm still refining the TPL and will post an update as I get one working.

    legend: {
        docked: 'top',
        border: 0,
        style: { borderColor: 'red' },
        tpl: [            
            '<tpl for=".">',                
                '<div class="myLegendItem" style="float:left;margin:5px;padding:0px;cursor:pointer;">',
                      '<div class="" style="float:left;margin:2px;width:10px;height: 10px; background:{mark};opacity:.6"></div><div style="float:left;">{name}</div>',                                      
                '</div>',                    
            '</tpl>'                
        ],
        itemSelector: '.myLegendItem'
},