Skip to main content

​
Overview

Data labels display numeric values directly on chart elements like bars, columns, lines and pie slices. They make it easier to read exact values without relying on tooltips or axes. 
const config: GraphConfig = {
  dataLabels: {
    showDataLabels: true,
    dataLabelFormat: 'absolute'
  }
};

​
Show data labels

​
dataLabels.showDataLabels
boolean
default:"false"
Whether to show numeric data labels on the chart. When true, values appear directly on bars, columns, line points and pie slices.
const config: GraphConfig = {
  type: 'column',
  data: {
    columns: [
      { key: 'product', label: 'Product' },
      { key: 'sales', label: 'Sales' }
    ],
    rows: [
      { product: 'A', sales: 100 },
      { product: 'B', sales: 150 },
      { product: 'C', sales: 120 }
    ]
  },
  dataLabels: {
    showDataLabels: true  // Show "100", "150", "120" on top of columns
  }
};
Data labels respect the number formatting configured in appearance.numberFormat, including decimal places and abbreviations.

​
Label format

​
dataLabels.dataLabelFormat
'absolute' | 'percentage'
default:"absolute"
Format to use for the data labels:
  • 'absolute' - Show the actual value from the data
  • 'percentage' - Show values as percentages (calculated differently for each graph type)

​
Absolute values

Show the actual numeric values: 
dataLabels: {
  showDataLabels: true,
  dataLabelFormat: 'absolute'  // Shows: 100, 150, 120
}

​
Percentage values

Show values as percentages. The calculation method depends on the chart type: For stacked charts:
  • Shows each segment as a percentage of the total stack
For pie/donut charts:
  • Shows each slice as a percentage of the total
For other charts:
  • Shows each value as a percentage of the total sum
const config: GraphConfig = {
  type: 'columnStacked',
  dataLabels: {
    showDataLabels: true,
    dataLabelFormat: 'percentage'  // Shows each segment as % of total
  }
};

​
Stack totals

​
dataLabels.showStackTotals
boolean
default:"false"
Whether to show total values above stacked bar or column stacks. Only applicable to stacked bar and column charts.
const config: GraphConfig = {
  type: 'columnStacked',
  data: {
    columns: [
      { key: 'quarter', label: 'Quarter' },
      { key: 'online', label: 'Online' },
      { key: 'retail', label: 'Retail' }
    ],
    rows: [
      { quarter: 'Q1', online: 100, retail: 50 },
      { quarter: 'Q2', online: 120, retail: 60 },
      { quarter: 'Q3', online: 140, retail: 55 }
    ]
  },
  dataLabels: {
    showStackTotals: true  // Shows "150", "180", "195" above each stack
  }
};
showStackTotals and showDataLabels can be used together. This shows both the individual segment values and the total for each stack.

​
Category labels

​
dataLabels.showCategoryLabels
boolean
default:"false"
Whether to show category names on pie and donut charts. Only applicable to pie and donut chart types.When true, category names appear next to each slice.
const config: GraphConfig = {
  type: 'pie',
  data: {
    columns: [
      { key: 'department', label: 'Department' },
      { key: 'budget', label: 'Budget' }
    ],
    rows: [
      { department: 'Marketing', budget: 50000 },
      { department: 'Sales', budget: 75000 },
      { department: 'Engineering', budget: 120000 }
    ]
  },
  dataLabels: {
    showCategoryLabels: true  // Shows "Marketing", "Sales", "Engineering"
  }
};

​
Combining data labels

You can combine different data label options for comprehensive labelling:

​
Stacked chart with totals and segment labels

const config: GraphConfig = {
  type: 'barStacked',
  dataLabels: {
    showDataLabels: true,       // Show values on each segment
    dataLabelFormat: 'absolute', // Show actual values (not percentages)
    showStackTotals: true        // Also show the total for each bar
  }
};

​
Pie chart with categories and percentages

const config: GraphConfig = {
  type: 'pie',
  dataLabels: {
    showDataLabels: true,        // Show values on each slice
    dataLabelFormat: 'percentage', // Show as percentages
    showCategoryLabels: true     // Also show category names
  }
};

​
Chart type compatibility

Different data label options work with different chart types:
OptionCompatible chart types
showDataLabelsAll chart types except table
dataLabelFormat: 'percentage'All chart types except table
showStackTotalsbarStacked, barStackedFill, columnStacked, columnStackedFill
showCategoryLabelspie, donut

​
Complete example

const config: GraphConfig = {
  type: 'columnStacked',
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'new', label: 'New customers' },
      { key: 'returning', label: 'Returning customers' }
    ],
    rows: [
      { month: 'Jan', new: 45, returning: 120 },
      { month: 'Feb', new: 52, returning: 135 },
      { month: 'Mar', new: 48, returning: 142 }
    ]
  },
  dataLabels: {
    showDataLabels: true,        // Show segment values
    dataLabelFormat: 'absolute',  // Show actual numbers
    showStackTotals: true         // Show totals above stacks
  },
  appearance: {
    numberFormat: {
      decimalPlaces: 0,           // No decimals for data labels
      abbreviation: 'none'         // Don't abbreviate
    }
  }
};