Overview
Headline numbers display key summary metrics prominently at the top of your chart. They’re ideal for highlighting the most important value in your data at a glance.
const config: GraphConfig = {
headlineNumbers: {
show: 'total',
compareWith: 'previous',
size: 'large'
}
};
Display mode
headlineNumbers.show
'current' | 'average' | 'total' | 'conversion' | 'none'
default:"none"
How to calculate the headline number:
'current' - The last value in the series'average' - The arithmetic mean of the series'total' - The sum of all values in the series'conversion' - The ratio between the first and last values (shown as a percentage)'none' - Don’t show any headline numbers
Current value
Show the most recent value in your data:
const config: GraphConfig = {
type: 'line',
data: {
columns: [
{ key: 'month', label: 'Month' },
{ key: 'users', label: 'Users' }
],
rows: [
{ month: 'Jan', users: 1000 },
{ month: 'Feb', users: 1200 },
{ month: 'Mar', users: 1450 }
]
},
headlineNumbers: {
show: 'current' // Shows 1,450 (the March value)
}
};
Average
Show the mean of all values:
headlineNumbers: {
show: 'average' // Shows the arithmetic mean
}
Total
Show the sum of all values:
headlineNumbers: {
show: 'total' // Shows the sum
}
Conversion rate
Show the percentage change from first to last value:
const config: GraphConfig = {
type: 'funnel',
data: {
columns: [
{ key: 'stage', label: 'Stage' },
{ key: 'count', label: 'Count' }
],
rows: [
{ stage: 'Visitors', count: 10000 },
{ stage: 'Signups', count: 2500 },
{ stage: 'Purchases', count: 500 }
]
},
headlineNumbers: {
show: 'conversion' // Shows 5% (500/10000)
}
};
Conversion rate is designed for funnel charts and calculates the ratio between the first and last values as a percentage.
Comparison
headlineNumbers.compareWith
'previous' | 'first' | 'none'
default:"none"
Show a trend arrow comparing the headline value to another value:
'previous' - Compare to the previous value in the series'first' - Compare to the first value in the series'none' - Don’t show a comparison
Compare with previous
Show how the headline value has changed from the previous data point:
const config: GraphConfig = {
data: {
columns: [
{ key: 'quarter', label: 'Quarter' },
{ key: 'revenue', label: 'Revenue' }
],
rows: [
{ quarter: 'Q1', revenue: 100000 },
{ quarter: 'Q2', revenue: 120000 },
{ quarter: 'Q3', revenue: 135000 }
]
},
headlineNumbers: {
show: 'current', // Show Q3 value (135,000)
compareWith: 'previous' // Compare to Q2 (120,000)
// Shows: 135,000 ↑ +12.5%
}
};
Compare with first
Show how the headline value has changed from the first data point:
headlineNumbers: {
show: 'current',
compareWith: 'first'
// Compare current value to the very first value
}
Size
headlineNumbers.size
'auto' | 'small' | 'medium' | 'large'
default:"auto"
Size of the headline metric:
'auto' - Automatically choose the appropriate size based on chart dimensions'small' - Small font size'medium' - Medium font size'large' - Large font size
headlineNumbers: {
show: 'total',
size: 'large' // Extra prominent
}
Multiple series
When your chart has multiple data series, a headline number is shown for each series:
const config: GraphConfig = {
data: {
columns: [
{ key: 'month', label: 'Month' },
{ key: 'productA', label: 'Product A' },
{ key: 'productB', label: 'Product B' }
],
rows: [
{ month: 'Jan', productA: 100, productB: 150 },
{ month: 'Feb', productA: 120, productB: 160 }
]
},
headlineNumbers: {
show: 'total' // Shows totals for both Product A and Product B
}
};
Complete example
const config: GraphConfig = {
type: 'line',
data: {
columns: [
{ key: 'week', label: 'Week' },
{ key: 'signups', label: 'Signups' }
],
rows: [
{ week: 'Week 1', signups: 45 },
{ week: 'Week 2', signups: 52 },
{ week: 'Week 3', signups: 48 },
{ week: 'Week 4', signups: 61 }
]
},
content: {
title: 'Weekly signups'
},
headlineNumbers: {
show: 'current', // Show current week (61)
compareWith: 'previous', // Compare to last week (48)
size: 'large' // Make it prominent
}
// Display shows: "61 ↑ +27.1%"
};