CODEWITHSUNDEEP
javascriptreactjshighchartshighmaps
es3735746
es3735746

Reputation: 851

Highcharts add tooltip that has a small arrow pointing toward the series

I'm building a highcharts highmap using the documentation here: http://api.highcharts.com/highmaps/tooltip.style

And I have successfully style my tooltip the way I want it to look in terms of color and content..

Here is what I current have: enter image description here

Here is what I need (the little arrow or carrot on the tooltip)

enter image description here

Usually I would create this by using HTML :after or :before and relative positioning but I'm stumped on how to do this in highcharts. I know I could set useHtml:true and then apply css to the class rendering the tooltip but I feel like there must be a way to automatically have the tooltips do this through a prop in the highcharts?

Here is the code I currently have for the highchart:

let config = {
  tooltip: {
      backgroundColor: '#ff9600',
      borderWidth: 1,
      borderColor: '#ff9600',
      borderRadius: 2,
      formatter: function () {
          return '<b>' +
          '<span style="'+ tooltipStyle + '">' + this.point.name + ': $ 620 USD</span><br>' +
          '<span style="'+ tooltipStyle + '">' + this.point.value + ' Transactions</span>';
      }
  },

  series:[{
    allAreas: true,
    data: data,
    mapData: mapsPathData,
    joinBy: [countryCode],
    dataLabels: {
        enabled: false,
        format: '{point.name}'
    }
  }]

};

Upvotes: 3

Views: 3267

Answers (1)

stpoa
stpoa

Reputation: 5573

In order to add arrow to your tooltip you can set followPointer: false

const options = {
  series: [{
    mapData: Highcharts.maps['custom/europe'],
    data: [
      ['is', 1],
      ['no', 1],
      ['se', 1],
      ['dk', 1],
      ['fi', 1]
    ]
  }],
  tooltip: {
    followPointer: false,
      backgroundColor: '#ff9600',
      borderWidth: 1,
      borderColor: '#ff9600',
      borderRadius: 2,
      formatter: function () {
          return '<b>' +
          '<span style="'+ 'tooltipStyle' + '">' + this.point.name + ': $ 620 USD</span><br>' +
          '<span style="'+ 'tooltipStyle' + '">' + this.point.value + ' Transactions</span>';
      }
  }
}

const chart = Highcharts.mapChart('container', options)

Live example: https://jsfiddle.net/krg9m2zb/

Upvotes: 6

Related Questions