Tooltips and Data Labels

Configure interactive tooltips and data labels to display information about chart data points

Tooltips and Data Labels

Tooltips and data labels are essential features for displaying detailed information about data points in your charts.

Tooltips

Tooltips appear when users hover over data points, providing contextual information about the data.

Basic Tooltip Configuration

Highcharts.chart('container', {
  tooltip: {
    enabled: true,
    backgroundColor: 'rgba(255, 255, 255, 0.85)',
    borderWidth: 1,
    borderColor: '#999',
    borderRadius: 3,
    shadow: true
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2]
  }]
});

Tooltip Positioning

Default

{
  tooltip: {
    // Tooltip follows the mouse pointer
    followPointer: false,
    
    // Distance from point to tooltip
    distance: 16
  }
}

Tooltip Formatting

Customize tooltip content using formatters:

Highcharts.chart('container', {
  tooltip: {
    formatter: function () {
      return '<b>' + this.series.name + '</b><br/>' +
        this.x + ': ' + this.y + ' units';
    }
  }
});

Or use format strings (from ts/Core/TooltipOptions.ts:89-150):

{
  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b><br/>'
  }
}

Shared Tooltips

Display information for multiple series in one tooltip:

{
  tooltip: {
    shared: true,
    crosshairs: true,
    headerFormat: '<b>{point.key}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>'
  }
}

Split Tooltips

Show separate tooltip boxes for each series:

{
  tooltip: {
    split: true,
    distance: 30,
    padding: 5
  }
}

Advanced Tooltip Features

1. Sticky Tooltips

   Keep tooltips visible on touch devices:

   {
     tooltip: {
       stickOnContact: true,
       // Tooltip stays visible until user touches elsewhere
     }
   }
   
2. Animation

   Control tooltip animation:

   {
     tooltip: {
       animation: true,
       // Or disable for better performance
       animation: false,
       // Or custom animation
       animation: {
         duration: 500,
         easing: 'easeOutBounce'
       }
     }
   }
   
3. HTML Tooltips

   Use HTML for rich formatting:

   {
     tooltip: {
       useHTML: true,
       formatter: function () {
         return '<div class="custom-tooltip">' +
           '<img src="icon.png" />' +
           '<h3>' + this.point.name + '</h3>' +
           '<p>Value: ' + this.y + '</p>' +
           '</div>';
       }
     }
   }
   

Data Labels

Data labels display values directly on the chart, making data immediately visible without interaction.

Basic Data Labels

Highcharts.chart('container', {
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{y}',
        style: {
          fontSize: '13px',
          fontWeight: 'normal',
          color: '#333'
        }
      }
    }
  },
  series: [{
    name: 'Sales',
    data: [29.9, 71.5, 106.4, 129.2]
  }]
});

Data Label Positioning

{
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true,
        // Position relative to the point
        align: 'center',
        verticalAlign: 'top',
        // Offset from the point
        x: 0,
        y: -5,
        // Rotation
        rotation: -45
      }
    }
  }
}

Custom Data Label Formatting

Format String

{
  dataLabels: {
    enabled: true,
    format: '{point.y:.1f}%',
    // {point.y:.1f} = one decimal place
  }
}

Data Labels Styling

{
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        backgroundColor: 'rgba(255, 255, 255, 0.7)',
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#AAA',
        padding: 5,
        style: {
          color: '#333',
          fontSize: '11px',
          fontWeight: 'bold',
          textOutline: '1px contrast'
        },
        shadow: {
          color: 'rgba(0, 0, 0, 0.3)',
          offsetX: 1,
          offsetY: 1,
          opacity: 0.5,
          width: 2
        }
      }
    }
  }
}

Data Labels for Specific Points

{
  series: [{
    data: [
      29.9,
      71.5,
      {
        y: 106.4,
        dataLabels: {
          enabled: true,
          format: 'Peak: {y}',
          style: {
            color: 'red',
            fontWeight: 'bold'
          }
        }
      },
      129.2
    ]
  }]
}

Tooltip vs Data Labels

Feature	Tooltips	Data Labels
Visibility	On hover/interaction	Always visible
Space Usage	Minimal	Can clutter chart
Detail Level	Can show extensive info	Best for key values
Performance	Better for large datasets	May impact rendering
Accessibility	Requires interaction	Immediately visible

Real-World Example

From the drilldown demo (samples/highcharts/demo/column-drilldown/demo.js:41-44):

Highcharts.chart('container', {
  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: ' +
      '<b>{point.y:.2f}%</b> of total<br/>'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.y:.1f}%'
      }
    }
  },
  series: [{
    name: 'Browsers',
    colorByPoint: true,
    data: [
      { name: 'Chrome', y: 63.06 },
      { name: 'Safari', y: 19.84 },
      { name: 'Firefox', y: 4.18 }
    ]
  }]
});

Best Practices

Tooltip Performance

• Use animation: false for charts with frequent updates
• Consider outside: true for better performance with complex layouts
• Use format strings instead of formatters when possible for better performance

Data Label Considerations

• Too many data labels can make charts cluttered and hard to read
• Use conditional formatting to show only important values
• Ensure sufficient contrast between labels and background
• Test on different screen sizes to avoid overlap

Related Resources

• Accessibility Features
• Styling and Themes
• Export Functionality