0

I have this multiple series line highchart which has a fixed tooltip and a crosshair. As the crosshair moves along the x-axis, the y-axis points are perfectly rendered in the fixed tooltip. However, one additional feature that I would like to add is that after adding a vertical plotline (chart.xAxis[0].addPlotLine) I also want to display the corresponding y-axis points and the datetime value (xAxis) in the fixed tooltip.

I somehow followed this Highchart demo to add a vertical plotline. But, I can't seem to find any related demo or samples that adds a vertical plotline and correspondingly display the x-axis and y-axis points. Is this doable in Highchart?

Note: Adding the vertical plotline is invoked via a button and, a value is passed to the chart.

Highchart configuration code

    function plotChartData(seriesData, xTitle)
{
    myChart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            zoomType: 'xy',
            panning: true,
            panKey: 'shift',
            plotBorderWidth: 1
        },
        title: {
            text: ''
        },
        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,
            dateTimeLabelFormats: {
                day: '%d %b %Y %I:%M %P'
            }
        },
        yAxis: {
            gridLineColor: '#DDDDDD',
            gridLineWidth: 0.5
        },
        tooltip: {
            positioner: function () {
                return {
                    x: this.chart.plotLeft,
                    y: this.chart.plotTop
                }
            },
            useHTML: true,
            pointFormat: '<small><font color="{series.color}"><strong>{series.name}</strong></font>: <strong>{point.y}</strong></small><br/>',
            headerFormat: '<span style="font-size: 8px">{point.key}</span><br/>',
            xDateFormat: '%d-%m-%Y %H:%M:%S',
            shared: true,
            valueDecimals: 2,
            shadow: false,
            borderWidth: 0,
            backgroundColor: 'rgba(255,255,255,0.8)'
        },
        series: [{
            name: xTitle,
            data: seriesData
        }]
    });
}

Code that add plot line in x-Axis. fixedLineDateTime is the value passed after clicking the button. 

if (myChart.xAxis[0].plotLinesAndBands.length === 0 || myChart.xAxis[0].plotLinesAndBands.length === null) {
        myChart.xAxis[0].addPlotLine({
            value: +moment(fixedLineDateTime),
            color: 'red',
            width: 1,
            id: 'plot-vertical-id'
        });
    }

Any help is greatly appreciated.

Junius
  • 589
  • 2
  • 12
  • 41
  • What points should be displayed in the tooltip? How are they related to the added plotline? – morganfree May 10 '17 at 09:51
  • @morganfree the points that will be displayed in the fixed tooltip is the y-axis point value (ex. `{series.name} {point.y}`). They are related to the added plotline in a way that the vertical plotline (x-axis `fixedLineDateTime` value) indicate the exact position in the y and x axis coordinates of the series. I'm thinking to add a property in `yAxis` of my highchart initialisation but I don't know the correct way of doing it. Could you please guide me? – Junius May 10 '17 at 10:08
  • I still do not know how you can determine the y value from the x axis plot line - you have x position because it's the plot line's value but y value? Anyway, if you build something dynamic it might be better to use [tooltip.formatter](http://api.highcharts.com/highcharts/tooltip.formatter) Inside the formatter you can grab any information you want - http://jsfiddle.net/4azu308t/ – morganfree May 10 '17 at 11:20
  • @morganfree thanks for giving an example code. I really appreciate it. I think `tooltip.formatter` will do the job that I need. I will explore more on this property. – Junius May 11 '17 at 01:58
  • @morganfree I have used your sample code, but then on this line `const header = ${this.x}
    ;` I get the calculated datetime value in my x-axis (ex. 1484641900000). Is there a way to convert this into an exact datetime (eg. 10-05-2017 02:39 PM)?     – Junius May 11 '17 at 02:39
  • @Juniuz you can use `Highcharts.dateFormat('%e - %b - %Y',new Date(this.x))` to format datetime value x-axis (ex. 1484641900000) in tooltip [refer](http://stackoverflow.com/a/17041567/3898339) this answer – Deep 3015 May 11 '17 at 06:42
  • @Deep3015 thank you for that. I have applied `Highcharts.dateFormat()` function to convert the milliseconds value and format the date, and it works. – Junius May 11 '17 at 21:01

0 Answers0