Highcharts: showing tooltip with calculated value at Crosshair

user_11305434 0
Viewed 31

I whant to have tooltip at mouseposition, not only at "real" data (so not getting the series data, but the calculated data).

How to do this?

(the real data is different, not a straight line like in the fiddle)

Highcharts.stockChart('container', {

  xAxis: {
    type: 'datetime',
    startOnTick: false,
    endOnTick: false,
    tickInterval: 360 * 24 * 3600 * 1000,
    crosshair: {
      snap: true,
    },
  },

  tooltip: {
    split: false,
    shared: true,
  },

  legend: {
    enabled: true,
    layout: 'proximate',
    align: 'right',
    itemStyle: {
      color: '#000000',
      fontWeight: 'bold',
      fontSize: '10px',
    }
  },

  series: [{
      name: 'Line1',
      data: [{
          x: (new Date("2000-05-12")).getTime(),
          y: 0
        },
        {
          x: (new Date("2050-05-12")).getTime(),
          y: 100
        },
      ]
    },
    {
      name: 'Line2',
      data: [{
          x: (new Date("2000-05-12")).getTime(),
          y: 100
        },
        {
          x: (new Date("2050-05-12")).getTime(),
          y: 0
        },
      ]
    }
  ]
});

https://jsfiddle.net/nowo/09br3g6m/7/

highcharts tooltip
1 Answers

You need to have points that crosshair can refer to like on the example.

To edit the options you want to show, you have the option of using xAxis.labels.formatter.

xAxis: {
  crosshair: {
    labels: {
      enabled: true,
      shape: 'rect',
      //format:'{value:%d%y}',
      backgroundColor: 'rgb(255,0,0)',
      formatter: function(value) {
        return 'label: ' + value;
      }
    },
  }
},
yAxis: {
  opposite: true,
  crosshair: {
    label: {
      enabled: true,
      //format: '{value:.2f}',
      shape: 'rect',
      padding: 2,
      formatter: function(number) {
        console.log('here is the numer', number);
        return 'test ' + number;
      }
    }
  },
  labels: {
    align: 'left',
    format: '{value:.2f}',
    y: 6,
    x: 2
  }
},

Live demo: https://jsfiddle.net/BlackLabel/8cdyh253/1/

user_121716730
Related