CODEWITHSUNDEEP
javascripthighchartsrange
Hayk Aghabekyan
Hayk Aghabekyan

Reputation: 1087

highcharts range lines issue

I am using highcharts.js and I have two range lines and what I want is to show only information for one graph when I am hovering graph points.

Right now it is like this

line1: 23
min/max range: 21-25
line2: 24
min/max range: 22-27

Instead I want

line1: 23
min/max range: 21-25

when I am hovering line1 point and line2 info when I am hovering on it.

I can set tooltip: {shared: false} in the options, however it is now showing min/max ranges anymore.

bellow is jsfiddle link for my graph

Upvotes: 2

Views: 463

Answers (3)

Hayk Aghabekyan
Hayk Aghabekyan

Reputation: 1087

I also found one way to solve this problem,

I am passing each ranges data to series like in the example below

{
    name: "line 1",
    data: averages1,
    ranges: ranges1,
    zIndex: 1,
    marker: {
        fillColor: 'white',
        lineWidth: 2,
        lineColor: Highcharts.getOptions().colors[0]
    }
}, {
    name: "Min/Max Range",
    data: ranges1,
    type: 'arearange',
    lineWidth: 0,
    linkedTo: ':previous',
    color: Highcharts.getOptions().colors[0],
    fillOpacity: 0.3
}

and then in the formatter I am accessing to point's range values like this

tooltip: {
    formatter: function() {
        var that = this;
        var min, max;
        if(this.series.options.hasOwnProperty("ranges"))
            $.each(this.series.options.ranges, function (i, point) {
                if(point[0] == that.x) {
                    min = point[1];
                    max = point[2];
                }
            });
            return "min/max range: " + min + " - " + max;
        }
    }
}

jsfiddle example

Upvotes: 1

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can use formatter and add ids for each serie, then customise tooltip.

Example: http://jsfiddle.net/fC4AN/5/

 formatter:function(){

                var x = this.x,
                    chart = this.series.chart,
                    relatedId = this.series.options.relatedId || this.series.options.id,
                    relatedSerie = chart.get('blackArea'),
                    txt = this.low === UNDEFINED ? 'y1: ' + this.y : ' low: ' + this.low + ' high: ' + this.high;


                $.each(relatedSerie.data,function(i,p){
                    if(p.x === x) {
                        txt+= p.low === UNDEFINED ? '<br>y: '+p.y : ' low: ' + p.low + ' high: ' + p.high;
                    }
                });

                return txt;

            },

Upvotes: 2

SoylentGreen
SoylentGreen

Reputation: 11

You can set the tooltip option 'shared' to false, or simply delete it.

    $('#container').highcharts({

        title: {
            text: 'July temperatures'
        },

        xAxis: {
            type: 'datetime'
        },

        yAxis: {
            title: {
                text: null
            }
        },

        tooltip: {
            crosshairs: true,
            shared: false,
            valueSuffix: '°C'
        },
        // etc.
    });

Upvotes: -1

Related Questions