Data label callout

Second data label as callout. Only enabled on some points. First data label hidden when there is a call-out

by kzoon

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

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

CSS

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

JavaScript

Highcharts.chart('container', {

      chart: {
        type: 'column'
      },

      title: {
        text: 'Annual precipitation'
      },

      subtitle: {
        text: 'Highcharts data labels with callout shape'
      },

      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },

      plotOptions: {
        series: {
          dataLabels: [{
              enabled: true
            },
            {
              enabled: false,
              shape: 'callout',
              allowOverlap: true,
              crop: false,
              overflow: 'allow',
              backgroundColor: 'rgba(256, 256, 256, 0.5)',
              borderRadius: 5,
              borderWidth: 1,
              borderColor: '#2f7ed8',
              shadow: true,
              padding: 8,
              style: {
                color: '#333333',
                textOutline: 'none',
                fontSize: '12px',
                fontWeight: 'normal',
              },
              verticalAlign: 'bottom',
              y: -6,
              format: '{x} <br> {series.name}: {y} '
            }
          ]
        }
        },

        series: [{
          data: [{
            y: 29.9,
            dataLabels: [{
                enabled: false
              },
              {
                enabled: true,
              }
            ]
          }, {
            y: 71.5
          }, {
            y: 106.4
          }, {
            y: 129.2
          }, {
            y: 144.0
          }, {
            y: 176.0
          }, {
            y: 135.6
          }, {
            y: 148.5
          }, {
            y: 216.4,
              dataLabels: [{
                enabled: false
              },
              {
                enabled: true,
              }
            ]
          }, {
            y: 194.1
          }, {
            y: 95.6
          }, {
            y: 54.4
          }]
        }]
      });