CODEWITHSUNDEEP
javascripthighcharts
Marijn
Marijn

Reputation: 79

Is there a way to show overlapping points of the same serie in highchart?

I've made a graph with Highchart which makes it possible for 2 datapoints of the same serie to overlap, however only the top datapoint shows. I want them both to show so that I can read the information of both the points. I have found an example how this works with 2 series but I really don't get how I can make that work if you only have 1 serie of datapoints that can overlap.

Here's the example of the 2 series: http://jsfiddle.net/Malinga/xkks3tno/

    $(function () {
    var series1 = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];

    var series2 = [24.9, 50.5, 106.4, 90.2, 80.0, 150.0, 160.6, 170.5, 160.4, 180.1, 91.6, 51.4];

    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        tooltip: {
            formatter: function () {
                var s1 = this.series.chart.series[0].processedYData[this.point.index];
                var s2 = this.series.chart.series[1].processedYData[this.point.index];
                if (Math.abs(s1 - s2) < 6) {
                    return '<b>' + this.series.chart.series[0].name + ' :' + s1 + '</b><br/><b>' + this.series.chart.series[1].name + ' :' + s2 + '</b><br/>in month : ' + this.x;
                }
                return '<b>' + this.series.name + ' :' + this.y + '</b><br/>in month : ' + this.x;
            }
        },
        series: [{
            data: series1
        }, {
            data: series2
        }]
    });
});

Upvotes: 1

Views: 1812

Answers (1)

wergeld
wergeld

Reputation: 14462

Why not set the tooltip shared property to true? This will show all points under the given xAxis index. If you mean you want to visibly see the 1st series' point "under" the 2nd series' marker then you can adjust the marker.radius size:

series: [{
    marker: {
        radius: 5
    },
    data: series1
}, {
    data: series2
}]

Upvotes: 2

Related Questions