I have a multiple series of Highchart which I want to display the tooltip in a fixed position. I followed this highcharts demo based on this documentation. Unfortunately, based on the configuration code that I wrote, the tooltip did not display in the fixed position.

The chart has a crosshair that is set to true and, displays the y-axis points as I move the mouse along the x-axis (screenshot below).

On the screenshot above, I want to display the tooltip CDT158: 188.84 and CDEP158: 151.00 on the green box (top left fixed position).

This is my sample configuration code

    function plotChartData(dataSeries, xaxisTitle)
{
    myChart = new Highcharts.Chart({
        chart: {
            renderTo: 'chartSpace',
            type: 'line',
            zoomType: 'xy',
            panning: true,
            panKey: 'shift',
            plotBorderWidth: 1,
            events: {
                dblclick: function (e) {
                    window.alert('Hello Chart!')
                }
            }
        },
        title: {
            text: 'Fixed Tooltip'
        },
        legend: {
            layout: 'horizontal',
            align: 'left',
            itemDistance: 10,
            borderWidth: 0,
            itemMarginTop: 0,
            itemMarginBottom: 0,
            padding: 20
        },
        plotOptions: {
            series: {
                states: {
                    hover: {
                        enabled: false
                    }
                },
                dataLabels: {
                    enabled: false,
                    format: '{y}'
                },
                allowPointSelect: false
            }
        },
        xAxis: {
            type: 'datetime',
            labels: {
                rotation: -65,
                style: {
                    fontSize: '9px',
                    fontFamily: 'Verdana, sans-serif'
                }
            },
            crosshair: true
        },
        yAxis: {
            gridLineColor: '#DDDDDD',
            gridLineWidth: 0.5
        },
        tooltip: {
            positioner: function () {
                return { x: 80, y: 10 };
            },
            pointFormat: '{series.name}: <b>{point.y}</b><br/>',
            split: true,
            valueDecimals: 2,
            shadow: false,
            borderWidth: 0,
            backgroundColor: 'rgba(255,255,255,0.8)'
        },
        series: [{
            name: xaxisTitle,
            data: dataSeries
        }]
    });
}

I can't seem to find any solution out there that is similar to my requirement. I looked in the Highcharts API documentation but, I'm confused of which property or object to use.

Any help is greatly appreciated.

I have a multiple series of Highchart which I want to display the tooltip in a fixed position. I followed this highcharts demo based on this documentation. Unfortunately, based on the configuration code that I wrote, the tooltip did not display in the fixed position.

The chart has a crosshair that is set to true and, displays the y-axis points as I move the mouse along the x-axis (screenshot below).

On the screenshot above, I want to display the tooltip CDT158: 188.84 and CDEP158: 151.00 on the green box (top left fixed position).

This is my sample configuration code

    function plotChartData(dataSeries, xaxisTitle)
{
    myChart = new Highcharts.Chart({
        chart: {
            renderTo: 'chartSpace',
            type: 'line',
            zoomType: 'xy',
            panning: true,
            panKey: 'shift',
            plotBorderWidth: 1,
            events: {
                dblclick: function (e) {
                    window.alert('Hello Chart!')
                }
            }
        },
        title: {
            text: 'Fixed Tooltip'
        },
        legend: {
            layout: 'horizontal',
            align: 'left',
            itemDistance: 10,
            borderWidth: 0,
            itemMarginTop: 0,
            itemMarginBottom: 0,
            padding: 20
        },
        plotOptions: {
            series: {
                states: {
                    hover: {
                        enabled: false
                    }
                },
                dataLabels: {
                    enabled: false,
                    format: '{y}'
                },
                allowPointSelect: false
            }
        },
        xAxis: {
            type: 'datetime',
            labels: {
                rotation: -65,
                style: {
                    fontSize: '9px',
                    fontFamily: 'Verdana, sans-serif'
                }
            },
            crosshair: true
        },
        yAxis: {
            gridLineColor: '#DDDDDD',
            gridLineWidth: 0.5
        },
        tooltip: {
            positioner: function () {
                return { x: 80, y: 10 };
            },
            pointFormat: '{series.name}: <b>{point.y}</b><br/>',
            split: true,
            valueDecimals: 2,
            shadow: false,
            borderWidth: 0,
            backgroundColor: 'rgba(255,255,255,0.8)'
        },
        series: [{
            name: xaxisTitle,
            data: dataSeries
        }]
    });
}

I can't seem to find any solution out there that is similar to my requirement. I looked in the Highcharts API documentation but, I'm confused of which property or object to use.

Any help is greatly appreciated.

• javascript
• jquery
• highcharts

1 Answer 1

A split tooltip is positioned automatically, so it means that a positioner option will not work. You can use a shared tooltip to achieve the result you want.

  tooltip: {
positioner: function() {
  return {
    x: this.chart.plotLeft,
    y: this.chart.plotTop
  };
},
shared: true,
headerFormat: '',
pointFormat: '{series.name}: <b>{point.y}</b><br/>',

example: http://jsfiddle/ydwLkyfe/1/