highcharts activity gauge need to display first series data without mouseover

Question

I am using angular 4 and I want to show the series 1 value got selected by default when we load the page and also it should show always without mouse hover, but when i mouse hover the second cirle it should show the corresponding value.

 this.chart = new Chart({
        chart: {
            type: 'solidgauge',
            marginTop: 50,
            backgroundColor: 'transparent'
        },
        title: {
            text: 'Incremental Price Monitor',
            style: {
                fontSize: '24px',
                color: 'ghostwhite',
                display: 'none'
            }
        },
        credits: {
            enabled: false
        },
        tooltip: {
            borderWidth: 0,
            backgroundColor: 'none',
            shadow: false,
            style: {
                fontSize: '16px',
                color: 'ghostwhite'
            },
            // pointFormat: '<span style="font-size:5em; color: {point.color}; font-weight: bold">{point.y}%</span><br><span style="font-size:1em; color: {point.color}; font-weight: bold">{series.name}</span>',
            pointFormat: '<span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}mw</span>',
            positioner: function (labelWidth) {
                return {
                    x: 200 - labelWidth / 2,
                    y: 210
                };
            }
        },
        pane: {
            startAngle: 0,
            endAngle: 360,
            background: [{ // Track for Move
                outerRadius: '112%',
                innerRadius: '88%',
                backgroundColor: '#1B5795',
                borderWidth: 0
            }, { // Track for Exercise
                outerRadius: '87%',
                innerRadius: '63%',
                backgroundColor: '#33683C',
                borderWidth: 0
            }]
        },
        yAxis: {
            min: 0,
            max: 100,
            lineWidth: 0,
            tickPositions: []
        },
        plotOptions: {
            solidgauge: {
                dataLabels: {
                    enabled: false
                },
                linecap: 'round',
                stickyTracking: false
            }
        },
        series: [{
            name: 'Target Ramp',
            data: [{
                color: this.forecasted_he_target_generation_Color,
                radius: '112%',
                innerRadius: '88%',
                y: this.forecasted_he_target_generation
            }]
        }, {
            name: 'MW Actual',
            data: [{
                color: this.current_generation_Color,
                radius: '87%',
                innerRadius: '63%',
                y: this.current_generation
            }]
        }]
    });

score 2 · Answer 1 · answered Sep 06 '18 at 12:38

Use callbackFunction to bind with the chart and override the functions & refresh the tooltip

HTML :

<highcharts-chart [Highcharts]="chart" [options]="options" [callbackFunction]="save.bind(this)"></highcharts-chart>

In TS Component:

save(chart:any) { chart.tooltip.hide = function(){ return; } var tooltipPoint = chart.series[0].points[0]; chart.tooltip.refresh(tooltipPoint); } }

Github issue https://github.com/highcharts/highcharts-angular/issues/68

score 0 · Answer 2 · answered Jul 10 '17 at 14:49

0

You can wrap Tooltip.prototype.hide method so the tooltip will not be hidden but populated with the new point-specific content.

Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function (p, delay) {
  if (this.options.alwaysVisible) {
    return this.refresh(this.chart.series[0].data[0])
  }

   p.call(this, delay)
})



tooltip: {
  alwaysVisible: true,

example: http://jsfiddle.net/uu4oLc0j/

answered Jul 10 '17 at 14:49

morganfree

12,254
1
14
21

Thanks for your reply but I am using import { Chart } from 'angular-highcharts/dist'; import { Highcharts } from 'angular-highcharts'; declare var require: any; require('highcharts/highcharts-more')(Highcharts); require('highcharts/modules/solid-gauge')(Highcharts); – Arunsai B K Jul 12 '17 at 10:40
Also I am getting compile time error message as wrap does not exist in type Static – Arunsai B K Jul 12 '17 at 10:41
It is because your type definitions misses wrap property. You should update the file - in Static interface add new property wrap and set its type to function. Ideally, you should move the code with wrap to another js file and load it as it would be a different module - just like highcharts-more, solidgauge, etc. – morganfree Jul 12 '17 at 15:53
I saw the file called @types/ highcharts/index.d.ts which are having Static Interface. I hope I can add it there but during build and deployment, the node modules folder may get deleted and recreated again and again,May I know how to handle that situation – Arunsai B K Jul 13 '17 at 12:56
Yes, you should update definitions of Highcharts. You should create a new file and set typescript correctly to use your new definition file. Bascially the wrap code should be called only once, so you should treat it as an external module - in the same way as highcharts-more, solid-gauge, etc. You should put that part of code to a separate and require it in the same way as highcharts, highcharts-more, etc. – morganfree Jul 13 '17 at 15:15
can we have 1 to 1 session for few mins because I need this to be delivered by tomorrow without fail , You can chat with me in arunsaibk@gmail.com – Arunsai B K Jul 13 '17 at 15:32
This fiddle requires the user to hover the mouse over the point. "need to display first series data without mouseover" – Jan 15 '18 at 09:36

score 0 · Answer 3 · answered Jul 13 '17 at 20:04

The ToolTip interface has a prototype 'hide' function that you can override to stop the tooltips from disappearing after the 'hovered-over' state is lost.

This can be accomplished as follows,

HighCharts.wrap(HighCharts.Tooltip.prototype, 'hide', function () {});

Usually this callback function is configured to hide the Tooltip; however, overriding it with NOOP will disable this.

You can also set a Tooltip to be displayed by default with the Tooltip.refresh() method, passing in the chart series points you'd like display - as follows,

chart.tooltip.refresh(chart.series[1].points[2]);

Find more information on accomplishing this by reading through the following tutorial - http://ahumbleopinion.com/customizing-highcharts-tooltip-visibility/

`passing in the chart series points you'd like display - as follows,` I tried this but it throws the error. like this: `Highcharts.chart('container', {exporting: false, chart: {type: 'solidgauge',height: '110%',events: { render: renderIcons }, }, tooltip: { alwaysVisible: true, borderWidth: 0, backgroundColor: 'none', shadow: false, refresh: (chart.series[0].points[0]), style: { fontSize: '16px' },` — , Jan 15 '18 at 13:19

highcharts activity gauge need to display first series data without mouseover

3 Answers3