CODEWITHSUNDEEP
highcharts
Ashwin Patil
Ashwin Patil

Reputation: 1347

how to have customized tooltip,when plot has two series

Suppose i have a plot with two series one is OHLC and Line.I want to customize tool tip like for example i don't want to show to time stamp, Open and High value of OHLC series in tool tip and i want add some customized message to line series tool tip.

How to achieve customized tool tip in Highchart?

http://jsfiddle.net/ZZAR5/1/

$(function () {

// create the chart
$('#container').highcharts('StockChart', {

    rangeSelector: {
        selected: 2
    },

    title: {
        text: 'AAPL Stock Price'
    },

    series: [{
        type: 'ohlc',
        data: [
            [1147996800000, 63.26, 64.88, 62.82, 64.51],
            [1148256000000, 63.87, 63.99, 62.77, 63.38],
            [1148342400000, 64.86, 65.19, 63.00, 63.15],
            [1148428800000, 62.99, 63.65, 61.56, 63.34],
            [1148515200000, 64.26, 64.45, 63.29, 64.33],
            [1148601600000, 64.31, 64.56, 63.14, 63.55],
            [1148947200000, 63.29, 63.30, 61.22, 61.22],
            [1149033600000, 61.76, 61.79, 58.69, 59.77]
        ]
    }, {
        type: 'line',
        data: [
            [1147996800000, 63.26],
            [1148256000000, 63.87],
            [1148342400000, 64.86],
            [1148428800000, 62.99],
            [1148515200000, 64.26],
            [1148601600000, 64.31],
            [1148947200000, 63.29],
            [1149033600000, 61.76]
        ]
    }]

});

});

Upvotes: 0

Views: 932

Answers (1)

SteveP
SteveP

Reputation: 19093

You can control the format of the tooltip using the formatter function in the tooltip block. For example:

 tooltip: {
        formatter: function () {
            var s = '<b>' + this.x + '</b>';

            $.each(this.points, function (i, point) {
                s += '<br/>' + point.series.name + ': ' + point.y;
            });

            return s;
        },
        shared: true
    },

This formats the tooltip using a header of the x value, and lists series name and y for each series. shared: true means the tooltip is shared between both series, appearing the same no matter which series you hover over.

There is plenty of documentation on the tooltips along with some examples here: http://api.highcharts.com/highcharts#tooltip.formatter

and also here:

http://api.highcharts.com/highstock#tooltip.formatter

Upvotes: 2

Related Questions