CODEWITHSUNDEEP
javascriptjqueryhighcharts
Shen
Shen

Reputation: 644

Highcharts Solid Gauge only want to show 1 data label

I'd like to use Highcharts in a project of mine but am having some trouble with the Javascript as I'm fairly new to the language. I've got my current chart customized with the exception of data labels overlapping each other because there is more than 1 element in the data array.

// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {

        min: 0,
        max: 200,
        title: {
            text: 'Speed'
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'Speed',


        data: [160, 50],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                   '<span style="font-size:12px;color:silver">km/h</span></div>'
        },
        tooltip: {
            valueSuffix: ' km/h'
        }
    }]

}));

You can see from above my data: [160, 50] array. I must place the array elements from largest to lowest as the data plot on the graph is drawn over the previous; which is fine, I'm handling that.

My issue is how can I get the dataLabels to only display data[0]? I've tried numerous ways with no luck. Normally I am greeted with a blank screen in jsfiddle which I assume is invalid JS.

Here is a default graph showing my problem in jsfiddle: http://jsfiddle.net/wzx8r9qq/

Upvotes: 2

Views: 4109

Answers (1)

Guanxi
Guanxi

Reputation: 3131

What I understand from your code is that you are having one series with two data points (160, and 50). So, for display either you can make this enable for both or not.

For what you want to achieve, I think alternative would be to use two series instead of one and displaying value from one series and not other. Note: here are two series one above another.

Here is the updated code and jsFiddle

// The speed gauge
    $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {

            min: 0,
            max: 200,
            title: {
                text: 'Speed'
            }
        },

        credits: {
            enabled: false
        },

        series: [{
            name: 'Speed',
            data: [160],            
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                       '<span style="font-size:12px;color:silver">km/h</span></div>'
            },
            tooltip: {
                valueSuffix: ' km/h'
            }
        },
                 {
            name: 'Speed',
            data: [50],            
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '"></span><br/>' +
                       '<span style="font-size:12px;color:silver">km/h</span></div>'
            },
            tooltip: {
                valueSuffix: ' km/h'
            }
        }
                ]
    }

Upvotes: 4

Related Questions