CODEWITHSUNDEEP
highcharts
Jaacob
Jaacob

Reputation: 27

HighCharts - Permanent tooltip on solid gauge

So, I'm using Highcharts'solidgauge-chart as a circular progress bar. It's working very nicely except for one thing; tooltips. I'd love to have the tooltip permanently inside the chart as shown on the image, but I can't seem to find anything on the API and documentation, or Google for that matter, that'd help me set it visible permanently. Right now I need to hover my cursor on top of it which, for my purpose, isn't ideal.

I'm using solidgauge-type simply because I couldn't find a more fitting type for this and I just wanted to stick with Highcharts.

Any kind of help is appreciated!

Solid gauge -chart

Upvotes: 1

Views: 379

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

You can use the dataLabels to display the wanted value inside the solidgauge chart.

  series: [{
    name: 'Speed',
    data: [80],
    dataLabels: {
      y: -20,
      borderWidth: 0,
      useHTML: true,
      format: '<div style="text-align:center">' +
        '<span style="font-size:25px">{y}</span><br/>' +
        '<span style="font-size:12px;opacity:0.4">km/h</span>' +
        '</div>'
    },
  }]

Demo: https://jsfiddle.net/BlackLabel/g724szmc/

API: https://api.highcharts.com/highcharts/series.solidgauge.dataLabels

Upvotes: 0

Related Questions