Series Configuration Options
Series options control the data, appearance, and behavior of individual data series within a chart.
Source: ts/Core/Series/SeriesOptions.ts
Basic Configuration
Highcharts.chart('container', {
series: [{
type: 'line',
name: 'Sales',
data: [1, 3, 2, 4, 5],
color: '#7cb5ec'
}]
});
Core Options
type
The series type (line, column, bar, pie, scatter, etc.)
series: [{
type: 'column',
data: [1, 2, 3]
}]
name
The name of the series as shown in the legend and tooltip
series: [{
name: 'Monthly Sales',
data: [29.9, 71.5, 106.4]
}]
data
data
Array<number | [number, number] | PointOptions>
required
The series data points
series: [{
// Simple values
data: [1, 2, 3, 4, 5]
}]
series: [{
// [x, y] tuples
data: [[0, 1], [1, 3], [2, 2]]
}]
series: [{
// Point configurations
data: [
{ y: 10, name: 'Point 1', color: 'red' },
{ y: 20, marker: { enabled: true }},
{ x: 5, y: 15, id: 'special' }
]
}]
Unique identifier for the series, used with chart.get()
series: [{
id: 'main-series',
data: [1, 2, 3]
}]
// Later access
const series = chart.get('main-series');
Appearance Options
color
The main color of the series
series: [{
color: '#ff0000', // Hex color
data: [1, 2, 3]
}]
series: [{
color: 'rgba(255, 0, 0, 0.5)', // RGBA
data: [1, 2, 3]
}]
series: [{
color: { // Gradient
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#ff0000'],
[1, '#0000ff']
]
},
data: [1, 2, 3]
}]
colorIndex
Index into the default colors array (for styled mode)
series: [{
colorIndex: 3, // Use 4th color from palette
data: [1, 2, 3]
}]
lineWidth
Width of the line graph in pixels
series: [{
type: 'line',
lineWidth: 3,
data: [1, 2, 3]
}]
dashStyle
Dash style for the graph line
series: [{
type: 'line',
dashStyle: 'Dash', // 'Solid', 'ShortDash', 'Dot', etc.
data: [1, 2, 3]
}]
opacity
Opacity of the series (0-1)
series: [{
opacity: 0.5,
data: [1, 2, 3]
}]
visible
Whether the series should be initially visible
series: [{
name: 'Hidden Series',
visible: false,
data: [1, 2, 3]
}]
showInLegend
Whether to show the series in the legend
series: [{
name: 'Helper Series',
showInLegend: false,
data: [1, 2, 3]
}]
Marker Options
marker
Options for point markers
series: [{
marker: {
enabled: true,
symbol: 'circle', // 'circle', 'square', 'diamond', 'triangle'
radius: 5,
fillColor: '#ffffff',
lineColor: null, // Inherits from series.color
lineWidth: 2,
states: {
hover: {
enabled: true,
radius: 7
}
}
},
data: [1, 2, 3]
}]
Data Labels
dataLabels
Options for data labels on points
series: [{
dataLabels: {
enabled: true,
format: '{point.y}',
style: {
fontSize: '12px',
fontWeight: 'bold',
color: '#000000'
},
align: 'center',
verticalAlign: 'top',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderWidth: 1,
borderRadius: 3,
padding: 5
},
data: [1, 2, 3]
}]
ts/Core/Series/DataLabelOptions.ts
Axis Assignment
xAxis
Index or ID of the X axis to use
series: [{
xAxis: 0, // Use first X axis
data: [[1, 10], [2, 20]]
}]
series: [{
xAxis: 'primary-x', // Use axis with id 'primary-x'
data: [[1, 10], [2, 20]]
}]
yAxis
Index or ID of the Y axis to use
yAxis: [{
id: 'temperature',
title: { text: 'Temperature' }
}, {
id: 'rainfall',
title: { text: 'Rainfall' },
opposite: true
}],
series: [{
name: 'Temperature',
yAxis: 'temperature',
data: [7, 9, 12, 15]
}, {
name: 'Rainfall',
yAxis: 'rainfall',
data: [50, 45, 40, 35]
}]
Stacking
stack
Stack identifier for grouping series
plotOptions: {
column: {
stacking: 'normal' // or 'percent'
}
},
series: [{
name: 'Series 1',
stack: 'male',
data: [5, 3, 4]
}, {
name: 'Series 2',
stack: 'male',
data: [3, 4, 4]
}, {
name: 'Series 3',
stack: 'female',
data: [2, 5, 6]
}]
stacking
Stacking type: ‘normal’, ‘percent’, or undefined
series: [{
type: 'column',
stacking: 'normal',
data: [1, 2, 3]
}]
Sorting & Grouping
dataSorting
Data sorting configuration
series: [{
dataSorting: {
enabled: true,
matchByName: true,
sortKey: 'y'
},
data: [
{ name: 'A', y: 3 },
{ name: 'B', y: 1 },
{ name: 'C', y: 2 }
]
}]
ts/Core/Series/SeriesOptions.ts:63
Events
events
Event handlers for series events
series: [{
events: {
click: function(event) {
console.log('Series clicked:', this.name);
},
hide: function() {
console.log('Series hidden');
},
show: function() {
console.log('Series shown');
},
afterAnimate: function() {
console.log('Animation complete');
},
legendItemClick: function() {
return false; // Prevent hide/show on legend click
}
},
data: [1, 2, 3]
}]
ts/Core/Series/SeriesOptions.ts:111
Animation
animation
animation
boolean | AnimationOptions
default:"true"
Animation configuration for this series
series: [{
animation: false, // Disable animation
data: [1, 2, 3]
}]
series: [{
animation: {
duration: 2000,
easing: 'easeOutBounce'
},
data: [1, 2, 3]
}]
Threshold & Zones
threshold
The Y value threshold for negative color
series: [{
type: 'line',
threshold: 50,
negativeColor: '#ff0000',
data: [10, 60, 30, 70, 40]
}]
ts/Core/Series/SeriesOptions.ts:148
zones
Zone definitions for coloring parts of the series
series: [{
type: 'line',
zones: [
{ value: 30, color: '#ff0000' }, // Red below 30
{ value: 70, color: '#ffff00' }, // Yellow 30-70
{ color: '#00ff00' } // Green above 70
],
data: [10, 40, 60, 80, 50]
}]
States
states
Visual states for hover, select, and inactive
series: [{
states: {
hover: {
enabled: true,
lineWidth: 4,
halo: {
size: 10,
opacity: 0.5
}
},
select: {
color: '#ff0000',
borderColor: '#000000'
},
inactive: {
opacity: 0.2
}
},
data: [1, 2, 3]
}]
Point Options
point
Options for all points in the series
series: [{
point: {
events: {
click: function() {
console.log('Point clicked:', this.y);
},
mouseOver: function() {
this.update({ color: 'red' });
}
}
},
data: [1, 2, 3]
}]
Complete Example
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Comprehensive Series Configuration'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: { text: 'Value' }
},
series: [{
// Identity
id: 'main-series',
name: 'Primary Data',
// Data
data: [
{ y: 29.9, marker: { enabled: true }},
71.5,
{ y: 106.4, color: 'red', dataLabels: { enabled: true }},
129.2,
144.0
],
// Appearance
color: '#7cb5ec',
lineWidth: 3,
dashStyle: 'Solid',
opacity: 1,
// Markers
marker: {
enabled: false,
symbol: 'circle',
radius: 4,
states: {
hover: {
enabled: true,
radius: 6
}
}
},
// Data Labels
dataLabels: {
enabled: false,
format: '{point.y:.1f}',
style: { fontSize: '10px' }
},
// Threshold & Zones
threshold: 100,
zones: [
{ value: 50, color: '#ff0000' },
{ value: 100, color: '#ffaa00' },
{ color: '#00ff00' }
],
// States
states: {
hover: {
lineWidth: 4,
halo: {
size: 8,
opacity: 0.25
}
}
},
// Events
events: {
click: function() {
alert('Series clicked: ' + this.name);
},
mouseOver: function() {
console.log('Mouse over:', this.name);
},
afterAnimate: function() {
console.log('Animation complete');
}
},
// Point configuration
point: {
events: {
click: function() {
alert('Point clicked: ' + this.y);
}
}
},
// Behavior
visible: true,
showInLegend: true,
animation: {
duration: 1000
}
}]
});
See Also
