Reputation: 5162
I have a current chart where I plot the year's cumulative P&L. I would like to show each individual column as either green or red depending on whether or not that day's P&L was up or down but I'm not sure how to accomplish this within highcharts.
In order to do that I will have to set the x axis to one item of the data array, the y axis to another and use the third to determine the column color, as the data come in as an array of date,pnl,cumulativepnl. Currently to display the chart I set up the data as follows;
// split the data set into date and cumulativepnl
var pnldata = [],
dataLength = data.length;
for (var i = 0; i < dataLength; i++) {
pnldata.push([
data[i][0], // the date
data[i][2] // cumulativepnl data[i][1] is the day's pnl
]);
}
The series is set up as follows;
series: [{
type: 'column',
data: pnldata
}]
I am not sure how to split the data apart for the x and y axes, and how to set each individual columns color.
Solution: data array needs to be changed so color is set there (per Pawels answer)
var pointColor;
for (var i = 0; i < dataLength; i++) {
if (data[i][1] >= 0) {
pointColor='#008000';
} else {
pointColor='#FF0000';
}
pnldata.push({
x: data[i][0], // the date
y: data[i][2], // cumulativepnl data[i][1] is the day's pnl
color:pointColor
});
}
Here is the entire function's code;
function showColumnChart(data, selector,acctname) {
// split the data set into date and cumulativepnl
var pnldata = [],
dataLength = data.length;
var yr = moment().year(data[1][0]);
for (var i = 0; i < dataLength; i++) {
pnldata.push([
data[i][0], // the date
data[i][2] // cumulativepnl data[i][1], // pnl
]);
}
selector.highcharts({
chart: {
borderColor: null,
borderWidth: null,
type: 'line',
plotBackgroundColor: '#E5E4E2',
plotBorderColor: '#0000A0',
plotBorderWidth: 2,
plotShadow: false
},
plotOptions: {
column: {
colorByPoint: true
}
},
title: {
text: 'Cumulative P&L for ' + yr,
style: {
color: '#0000A0',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontStyle: 'italic'
}
},
subtitle: {
text: 'Account: ' + acctname,
style: {
color: '#0000A0',
fontWeight: 'bold',
fontSize: '11px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontStyle: 'italic'
}
},
lineWidth: 2,
xAxis: {
type: 'datetime',
labels: {
align: 'right',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '10px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontStyle: 'normal'
},
rotation:-60
},
tickInterval:480 * 3600 * 1000
},
yAxis: {
title: {
text: 'Cumulative P&L',
style: {
color: '#0000A0',
fontWeight: 'bold',
fontSize: '11px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontStyle: 'normal'
}
},
labels: {
align:'right',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '10px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontStyle: 'normal'
},
format: '$ {value}'
}
},
credits: {
enabled:false
},
legend: {
enabled: false
},
series: [{
type: 'column',
data: pnldata
}]
});
}
Upvotes: 1
Views: 1595
Reputation: 45079
This is where you create your data array:
pnldata.push([
data[i][0], // the date
data[i][2] // cumulativepnl data[i][1] is the day's pnl
]);
You need to change from array to object, so you will be able to set individual color, for example:
pnldata.push({
x: data[i][0], // the date
y: data[i][2], // cumulativepnl data[i][1] is the day's pnl
color: 'someColor'
});
Upvotes: 1