Skip to main content

​
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

{
  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

{
  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

FeatureTooltipsData Labels
VisibilityOn hover/interactionAlways visible
Space UsageMinimalCan clutter chart
Detail LevelCan show extensive infoBest for key values
PerformanceBetter for large datasetsMay impact rendering
AccessibilityRequires interactionImmediately 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

Build docs developers (and LLMs) love

Get started for freeTalk to us