CODEWITHSUNDEEP
highchartsgauge
user1606656
user1606656

Reputation: 63

highcharts gauge multineedles datalabels are overlapping

I have Highcharts Gauge chart with multiple needles and the datalabels of the needles are overlapped each other like http://jsfiddle.net/edLHB/3/ plotOptions I have used as following

plotOptions: {
        guage: {
            dataLabels: {
                enabled: true,
                crop: false,
                overflow: 'none'
            }
        }
    },

Please help me to get datalabels without overlapping.

Thanks

Upvotes: 0

Views: 1424

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

In general this solution is not supported (I mean collision detection), but you adapt this solution http://jsfiddle.net/menXU/6/. 

function StaggerDataLabels(series) {
    sc = series.length;
    if (sc < 2) return;

    for (s = 1; s < sc; s++) {
        var s1 = series[s - 1].points,
            s2 = series[s].points,
            l = s1.length,
            diff, h;

        for (i = 0; i < l; i++) {
            if (s1[i].dataLabel && s2[i].dataLabel) {
                diff = s1[i].dataLabel.y - s2[i].dataLabel.y;
                h = s1[i].dataLabel.height + 2;

                if (isLabelOnLabel(s1[i].dataLabel, s2[i].dataLabel)) {
                    if (diff < 0) s1[i].dataLabel.translate(s1[i].dataLabel.translateX, s1[i].dataLabel.translateY - (h + diff));
                    else s2[i].dataLabel.translate(s2[i].dataLabel.translateX, s2[i].dataLabel.translateY - (h - diff));
                }
            }
        }
    }
}

Upvotes: 0

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

Give them individual x or y values in the series

series: [{
            name: 'Speed',
            data: [80],
            dataLabels: {
                y:50
                }
        }, {
            name: 'Speed',
            data: [100],
            dataLabels: {
                y:30
                }
        }, {
            name: 'Speed',
            data: [150],
            dataLabels: {
                y:10
                }
        }]

Demo: http://jsfiddle.net/robschmuecker/edLHB/7/

Upvotes: 3

Related Questions