Highcharts - Can we have default and custom tooltip based on different chart types?

0
votes

Is there a way to have default and custom tooltip based on the chart type in Highcharts? For example, when the chart type is : 'scatter', I want Highcharts to trigger the default tooltip (on crosshair hover).

For every other chart types, I would like to render a customized html tooltip using tooltip > formatter function.

Please let me know if it's achievable.

1
highcharts

1 Answers

1
votes

Sure, it is pretty easy. You can define your tooltip in every separate series like in this example: https://jsfiddle.net/BlackLabel/cgjfe20L/

series: [{
  type: 'column',
  data: [8394, 9203, 6177, 9658, 8031],
  tooltip: {
    pointFormatter() {
      return '<span style="color: red;">Tooltip for column series</span>'
    }
  }
}, {
  data: [24916, 24064, 29742, 29851, 32490],
  tooltip: {
    pointFormatter() {
      return 'Tooltip for the first line series'
    }
  }
}, {
  data: [49126, 42064, 39742, 58251, 42490],
  tooltip: {
    pointFormatter() {
      return 'Tooltip for the second line series'
    }
  }
}]

Or you can define it in plotOptions object for all series of common type: https://jsfiddle.net/BlackLabel/ndyc79b1/

plotOptions: {
  column: {
    tooltip: {
      pointFormatter() {
        return '<span style="color: red;">Red tooltip for column series</span>'
      }
    }
  },
  line: {
    tooltip: {
      pointFormatter() {
        return '<span style="color: blue;">Blue tooltip for all line series</span>'
      }
    }
  }
},

series: [{
  type: 'column',
  data: [8394, 9203, 6177, 9658, 8031]
}, {
  data: [24916, 24064, 29742, 29851, 32490]
}, {
  data: [49126, 42064, 39742, 58251, 42490]
}]