How to show always the pop-up at the point in a cloud graph?

Question

In below picture you can see the pop-up which appears on hover. I want that it always appears and on the other point too.

Answer 1

try this by plotoptions

plotOptions: {
      series: {
        dataLabels: { 
            enabled: true, 
          inside: false,
          overflow: 'none',
          crop: true,
          shape: 'callout',
          backgroundColor:'rgba(255,255,255,0.8)',
          borderColor: 'rgba(0,0,255,0.8)',
          color: 'rgba(0,0,0,0.75)',
          borderWidth: .5,
          borderRadius: 5,
          y: -10,
          style: {
            fontFamily: 'Helvetica, sans-serif',
            fontSize: '10px',
            fontWeight: 'normal',
            textShadow: 'none'
          },
          formatter: function() {
            return '<strong>'+this.series.name+'</strong>'
                        +'<br/>Group: <strong>'+ this.x+'</strong>'
                  +'<br/>Value: <strong>'+ Highcharts.numberFormat(this.y,0)+'</strong>';
          }
        }
      }
    }

check this below example

 Highcharts.chart('container', { title: { text: 'Solar Employment Growth by Sector, 2010-2016' }, subtitle: { text: 'Source: thesolarfoundation.com' }, yAxis: { title: { text: 'Number of Employees' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, tooltip: { enabled: false, crosshairs: true }, plotOptions: { series: { dataLabels: { enabled: true, inside: false, overflow: 'none', crop: true, shape: 'callout', backgroundColor:'rgba(255,255,255,0.8)', borderColor: 'rgba(0,0,255,0.8)', color: 'rgba(0,0,0,0.75)', borderWidth: .5, borderRadius: 5, y: -10, style: { fontFamily: 'Helvetica, sans-serif', fontSize: '10px', fontWeight: 'normal', textShadow: 'none' }, formatter: function() { return '<strong>'+this.series.name+'</strong>' +'<br/>Group: <strong>'+ this.x+'</strong>' +'<br/>Value: <strong>'+ Highcharts.numberFormat(this.y,0)+'</strong>'; } } } }, series: [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }); 

 #container { min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/series-label.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="container"></div> 

Answer 2

Instead of tooltips, you can use the data labels:

plotOptions: {
    series: {
        dataLabels: {
            enabled: true
        }
    }
}

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

API Reference: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels