Reputation: 4129
I am using HighCharts for a line graph report. In this specific report I have been asked to Customize the colours of each series. The series will always stay the same. So for example:
John series: Blue dashed line Mary series: Solid Red Line
Does anyone know how to accomplish this?
Upvotes: 59
Views: 96119
Reputation: 26320
If you read the api here, you'll see the following text.
Serie
The actual series to append to the chart. In addition to the members listed below, any member of the
plotOptions
for that specific type of plot can be added to a series individually. For example, even though a generallineWidth
is specified inplotOptions.series
, an individuallineWidth
can be specified for each series.
So you can add anything from plotOptions
.
Demo:
series: [{
name: 'serie1',
data: [0,1,2,3,4,5,6,7,8,9],
color: '#FFFF00',
lineWidth: 4,
id: 'serie1',
step: true
}]
Upvotes: 12
Reputation: 3906
Options can be set separately for each series.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'John',
color: '#0066FF',
dashStyle: 'ShortDash',
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 2, 1), 71.5],
[Date.UTC(2010, 3, 1), 106.4]
]
},{
name: 'Mary',
color: '#FF0000',
data: [
[Date.UTC(2010, 0, 1), 60.9],
[Date.UTC(2010, 1, 1), 40.5],
[Date.UTC(2010, 2, 1), 90.0],
[Date.UTC(2010, 3, 1), 80.4]
]
}]
});
Upvotes: 117