HIGHCHART Activity guage tooltip issue

Question

I am using highchart activity guage. but its tooltip doesn't show on hover location.It always is shown in centre. I want to show tooltip on hover series.

Here is js fiddle hover on any series.

// Uncomment to style it like Apple Watch
/*
if (!Highcharts.theme) {
    Highcharts.setOptions({
        chart: {
            backgroundColor: 'black'
        },
        colors: ['#F62366', '#9DFF02', '#0CCDD6'],
        title: {
            style: {
                color: 'silver'
            }
        },
        tooltip: {
            style: {
                color: 'silver'
            }
        }
    });
}
// */

/**
 * In the chart render event, add icons on top of the circular shapes
 */
function renderIcons() {

  // Move icon
  if (!this.series[0].icon) {
    this.series[0].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
      .attr({
        'stroke': '#303030',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': 2,
        'zIndex': 10
      })
      .add(this.series[2].group);
  }
  this.series[0].icon.translate(
    this.chartWidth / 2 - 10,
    this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
    (this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2
  );

  // Exercise icon
  if (!this.series[1].icon) {
    this.series[1].icon = this.renderer.path(
        ['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8,
          'M', 8, -8, 'L', 16, 0, 8, 8
        ]
      )
      .attr({
        'stroke': '#ffffff',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': 2,
        'zIndex': 10
      })
      .add(this.series[2].group);
  }
  this.series[1].icon.translate(
    this.chartWidth / 2 - 10,
    this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
    (this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2
  );

  // Stand icon
  if (!this.series[2].icon) {
    this.series[2].icon = this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
      .attr({
        'stroke': '#303030',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': 2,
        'zIndex': 10
      })
      .add(this.series[2].group);
  }

  this.series[2].icon.translate(
    this.chartWidth / 2 - 10,
    this.plotHeight / 2 - this.series[2].points[0].shapeArgs.innerR -
    (this.series[2].points[0].shapeArgs.r - this.series[2].points[0].shapeArgs.innerR) / 2
  );
}

Highcharts.chart('container', {

  chart: {
    type: 'solidgauge',
    height: '100%',

  },

  title: {
    text: '',
    style: {
      fontSize: '24px'
    }
  },

  tooltip: {
    positioner: function(labelWidth, labelHeight, point) {
      var tooltipX, tooltipY;
      console.log(point)
      tooltipX = point.plotX
      tooltipY = point.plotY
      return {
        x: tooltipX,
        y: tooltipY
      };
    },
    shadow: false,
    borderWidth: 0,
    backgroundColor: 'rgba(255,255,255,0.8)'
  },

  pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{ // Track for Move
      outerRadius: '112%',
      innerRadius: '88%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
        .setOpacity(0)
        .get(),
      borderWidth: 0
    }, { // Track for Exercise
      outerRadius: '87%',
      innerRadius: '63%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
        .setOpacity(0)
        .get(),
      borderWidth: 0
    }, { // Track for Stand
      outerRadius: '62%',
      innerRadius: '38%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])
        .setOpacity(0)
        .get(),
      borderWidth: 0
    }]
  },

  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    tickPositions: []
  },

  plotOptions: {
    solidgauge: {

      linecap: 'round',
      stickyTracking: false,
      rounded: true
    }
  },
  credits: false,

  series: [{
      name: 'Move',
      dataLabels: {
        enabled: true,
        borderWidth: 0,
        y: -105,
        x: -15,
        color: 'black',
        format: '{point.y}',
        style: {
          textTransform: 'uppercase'
        }
      },
      data: [{
        color: '#ed663f',
        radius: '100%',
        innerRadius: '95%',
        y: 90
      }]
    }, {
      name: 'Exercise',
      dataLabels: {
        enabled: true,
        borderWidth: 0,
        y: -85,
        x: -15,
        color: 'black',
        format: '{point.y}',
        style: {
          textTransform: 'uppercase'
        }
      },
      data: [{
        color: '#2cc6f2',
        radius: '80%',
        innerRadius: '75%',
        y: 65
      }]
    }, {
      name: 'Stand',
      dataLabels: {
        enabled: true,
        borderWidth: 0,
        y: -70,
        x: -15,
        color: 'black',
        format: '{point.y}',
        style: {
          textTransform: 'uppercase'
        }
      },
      data: [{
        color: '#fdb600',
        radius: '60%',
        innerRadius: '55%',
        y: 50
      }]
    }, {
      name: 'pushups',
      dataLabels: {
        enabled: true,
        borderWidth: 0,
        y: -50,
        x: -15,
        color: 'black',
        format: '{point.y}',
        style: {
          textTransform: 'uppercase'
        }
      },
      data: [{
        color: '#2cc6f2',
        radius: '40%',
        innerRadius: '35%',
        y: 44
      }]
    },
    {
      name: 'pullups',
      dataLabels: {
        enabled: true,
        borderWidth: 0,
        y: -30,
        x: -15,
        color: 'black',
        format: '{point.y}',
        style: {
          textTransform: 'uppercase'
        }
      },
      data: [{
        color: '#c88ef4',
        radius: '20%',
        innerRadius: '15%',
        y: 50
      }]
    }





  ]
});

#container {
  margin: 0 auto;
  max-width: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div id="container"></div>

Thanks

Welcome to Stack Overflow! Please include the relevant information as text in the question itself, not as links. Please see How to ask a good question and how to create a Minimal, Complete, and Verifiable example. — Marc
– Marc, Commented Feb 20, 2018 at 9:48

Kamil Kulig · Accepted Answer · 2018-02-21 12:29:41Z

1

Instead using tooltip.positioner you can set tooltip.followPointer to true:

Live demo: http://jsfiddle.net/BlackLabel/mf87qcwv/

API reference: https://api.highcharts.com/highcharts/tooltip.followPointer

answered Feb 21, 2018 at 12:29

Kamil Kulig

5,8261 gold badge10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HIGHCHART Activity guage tooltip issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related