CODEWITHSUNDEEP
highcharts
Churchill
Churchill

Reputation: 1607

Show ranges as legend for highcharts angular gauge

I would like to display the ranges as my legend. An example gauge would be something like this

Can I have it so that I can have legends with colors and the text [Bad/Good/Excellent] based on the values?

plotBands: [{
            from: 0,
            to: 120,
            color: '#55BF3B' // green
        }, {
            from: 120,
            to: 160,
            color: '#DDDF0D' // yellow
        }, {
            from: 160,
            to: 200,
            color: '#DF5353' // red
        }]

Upvotes: 0

Views: 1631

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

Sure, just create separate series for legend, and enable them: http://jsfiddle.net/kbvC3/734/

    series: [{
        name: 'Speed',
        data: [80],
        tooltip: {
            valueSuffix: ' km/h'
        }
    }, {
        showInLegend: true,
        name: "Bad",
        color: '#55BF3B' // green   
    }, {
        showInLegend: true,
        name: "Good",
        color: '#DDDF0D' // yellow  
    }, {
        showInLegend: true,
        name: "Excellent",
        color: '#DF5353' // red  
    }]

Upvotes: 1

Related Questions