CODEWITHSUNDEEP
javascriptchartshighcharts
Manish
Manish

Reputation: 3521

How to draw multiple segments overlapping and non overlapping in high-charts?

I am working on visualisation of data points which has some overlapping fragments also. I found similar post here

HighCharts: draw multiple segments in a single serie?

but above example shows overlap fragment only.

points (x-value)

start   end
11874   14409
14362   29370
34611   36081
52352   53495
62915   63984
69091   70008
87523   90233
128515  133564
133661  139667
137848  144331

In my case, all fragments will be linear (all fragments are having fixed value of y except for overlapping segment as they should lie above to show that there is an overlap). How this can be implemented automatically (not manually setting value of y)?

Upvotes: 0

Views: 154

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7886

You can set different widths of lines. jsFiddle: http://jsfiddle.net/24qf98xL/9/

$(function () {
    $('#container').highcharts({
        series: [{
            id: 'main',
            data: [{x: 5, y: 10}, 
                   {x: 7, y: 10}]
        }, {
            data: [{x: 2, y: 12}, 
                   {x: 9, y: 12}],
            lineWidth: 10,
            linkedTo: 'main'
        }, {
            data: [{x: 6, y: 12}, 
                   {x: 19,y: 12}],
            lineWidth: 6,
            linkedTo: 'main'
        }, {
            data: [{x: 4, y: 12}, 
                   {x: 10,y: 12}],
            linkedTo: 'main'
        }]  
    }); 
});

Or alternatively you can try columnrange type series jsFiddle: http://jsfiddle.net/tjcg60p4/

Upvotes: 2

Related Questions