andrew215
Posts: 1
Joined: Wed Mar 23, 2022 1:21 pm

Show tooltip on load for angular highcharts

I want to show the tooltip on the map bubble when the page is loaded, and i want to search for a country on the map and show the tooltip on the bubble.
Help me please :D

Code: Select all

    export class GlobalViewComponent implements OnInit {
    Highcharts: typeof Highcharts = Highcharts;
    chartConstructor = 'mapChart';
    chartCallback;
    chart;
    bubbleData = [
        { code3: 'USA', z: 252, color: '#FF0000', fillColor: '#FF0000' },
        {
            code3: 'ROU',
            z: 109,
            color: '#00C867',
            borderColor: '#E0FFDD'
        }
    ];

    updateFromInput = false;
    events = {
        search(e: any) {
            console.log(e);
        }
    };

    chartOptions: Highcharts.Options = {
        chart: {
            height: '45%',
            map: worldMap as any
        },

        title: {
            text: null
        },

        legend: {
            enabled: false
        },

        credits: {
            enabled: false
        },

        series: [
            {
                type: 'map',
                name: 'Countries',
                color: '#E0E0E0',
                enableMouseTracking: true
            },
            {
                type: 'mapbubble',
                name: 'Population 2016',
                data: this.bubbleData,
                selected: true,
                maxSize: '8%',
                minSize: '3%',
                // @ts-ignore
                joinBy: ['iso-a3', 'code3'],

                tooltip: {
                    pointFormat: '{point.properties.hc-a2}: {point.z} countries',
                    followPointer: true,
                    followTouchMove: true,
                    headerFormat: '',
                    footerFormat: '',
                    valueDecimals: 0
                }
            }
        ]
    };

    ngOnInit() {
        //show first tooltip on load
    }
}
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Show tooltip on load for angular highcharts

Hello,

Thanks for reaching out to us with your question!

To achieve that you need to use the tooltip.refresh() method.

Similar forum thread:
viewtopic.php?t=44934

Live demo:
https://stackblitz.com/edit/highcharts- ... ble-swhgsq

Feel free to ask any further questions!

Best regards.
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Maps”