CODEWITHSUNDEEP
javascriptextjscharts
Andy
Andy

Reputation: 3012

Add a custom item to the legend of a chart in extjs

I have the following problem, i am trying to add a custom item to a radar chart in extjs just for info about some custom icons which I got to work on the chart.

The radar chart works fine and I have got the item in the legend by simply adding it to series, but this gives errors in the console because there is no value added, and this is not the way I want to do it just because it should have no value.

What I am looking for is basically just a way to add additional legend items, which are non-interactable (no onclick, hover, etc..)

Is this possible?

Upvotes: 3

Views: 2656

Answers (1)

Towler
Towler

Reputation: 1562

The best way to accomplish this is by defining your own extension (or override) of Ext.chart.LegendItem. Then, you would also need to extend (or override) Ext.chart.Legend in order to use your custom Legend Item.

If you don't feel like going through all that trouble, I was able to add an additional legend item by adding the field to a store (even though there is no data) and adding the series to the chart. It sounds similar to what you tried to do, although I am not getting any errors. See this fiddle.

var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2', 'data3', 'data4'],
    data: [
        { 'name': 'metric one',   'data1': 14, 'data2': 12, 'data3': 13 },
        { 'name': 'metric two',   'data1': 16, 'data2':  8, 'data3':  3 },
        { 'name': 'metric three', 'data1': 14, 'data2':  2, 'data3':  7 },
        { 'name': 'metric four',  'data1':  6, 'data2': 14, 'data3': 23 },
        { 'name': 'metric five',  'data1': 36, 'data2': 38, 'data3': 33 }
    ]
});

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    animate: true,
    theme:'Category2',
    store: store,
    legend: {
        position: 'top'
    },
    axes: [{
        type: 'Radial',
        position: 'radial',
        label: {
            display: true
        }
    }],
    series: [{
        type: 'radar',
        xField: 'name',
        yField: 'data1',
        showInLegend: true,
        showMarkers: true,
        markerConfig: {
            radius: 5,
            size: 5
        },
        style: {
            'stroke-width': 2,
            fill: 'none'
        }
    },{
        type: 'radar',
        xField: 'name',
        yField: 'data2',
        showMarkers: true,
        showInLegend: true,
        markerConfig: {
            radius: 5,
            size: 5
        },
        style: {
            'stroke-width': 2,
            fill: 'none'
        }
    },{
        type: 'radar',
        xField: 'name',
        yField: 'data3',
        showMarkers: true,
        showInLegend: true,
        markerConfig: {
            radius: 5,
            size: 5
        },
        style: {
            'stroke-width': 2,
            fill: 'none'
        }
    },{
        type: 'radar',
        xField: 'name',
        yField: 'data4',
        showMarkers: false,
        showInLegend: true,
        markerConfig: {
            radius: 5,
            size: 5
        },
        style: {
            'stroke-width': 2,
            fill: 'none'
        }
    }]
});

Upvotes: 4

Related Questions