how to : specify colors for multiple axes chart? - colors

Question

My chart shows up well but the two lines are of the same color. How do I specify different colors for the two lines? Here is my code (fragment) so far:
config.pointIndex = null;
config.areaPoints = new Array();
config.areaPoints[0] = pointsopens;
config.areaPoints[1] = pointsclicks;
var plotLinesopen = createPlotlines(pointsopens);
var plotLinesclick = createPlotlines(pointsclicks);
var options = {
chart : { renderTo : 'areaChart' },
colors: [
'#4572A7',
'#AA4643'
],
xAxis: {
plotLines1: plotLinesopen,
plotLines2: plotLinesclick
},
series : [ data.pointsopens, data.pointsclicks ]
};
if (length > 100) {
options.plotOptions = {
area : {
lineWidth: 1,
marker : { radius : 1 }
}
};
}
options = jQuery.extend(true, {}, areaChartDefault, options);
charts.area = new Highcharts.Chart(options);
Thank you.
PS, my code is now:
config.pointIndex = null;
config.areaPoints = new Array();
config.areaPoints[0] = pointsopens;
config.areaPoints[1] = pointsclicks;
var plotLinesopen = createPlotlines(pointsopens, '#AAAAAA');
var plotLinesclick = createPlotlines(pointsclicks, '#DDDDDD');
var options = {
chart : { renderTo : 'areaChart' },
xAxis: {
plotLines: [plotLinesopen, plotLinesclick]
},
series : [ data.pointsopens, data.pointsclicks ]
};
if (length > 100) {
options.plotOptions = {
area : {
lineWidth: 1,
marker : { radius : 1 }
}
};
}
options = jQuery.extend(true, {}, areaChartDefault, options);
charts.area = new Highcharts.Chart(options);
but it still gives me two dark blue plotlines. The createPlotlines function looks like so:
function createPlotlines(points, colour) {
// Create plotlines from point data
colour = typeof colour !== 'undefined' ? colour : '#CCCCCC';
alert ('colour=='+colour);
var plotLines = [];
var middleYval = 0;
for (var i in points) {
middleYval = Math.max(middleYval, points[i].y);
if (points[i].l) { // l property is true if label should be on for this point
plotLines.push({
color: colour,
id: 'plotline'+i,
value: points[i].x,
width: 1,
});
}
}
return plotLines;
}

Answer 1

Do you mean different colors for the xAxis and yAxis? I only see that this would make one of each. You can definitely set the colors of the axis lines independently.
See this: example, ref
EDIT:
For plotLines you can use this:
demo

Answer 2

If you take a look the reference you'll see that there's no attr named colors.
Other problem is that there's no attr plotLines1 and plotLines2 as you can see here
Solution: If you want to change a plot line color your have to pass your plotlines thrue an array, like the following and set theire color:
var options = {
chart : { renderTo : 'areaChart' },
xAxis: {
plotLines: [{
color: '#4572A7', //
width: 2,
value: 5.5,
id: 'plotline-1'
}, {
color: '#AA4643',
width: 2,
value: 8.5,
id: 'plotline-2'
}]
},
series : [ data.pointsopens, data.pointsclicks ]
};
Live example
Update1:
You're returning an array of objects in this function createPlotlines and then you put this array inside other array. That's the problem.
Replace your function to the following:
function createPlotlines(points, colour) {
// Create plotlines from point data
colour = colour || '#CCCCCC';
var middleYval = 0;
for (var i in points) {
middleYval = Math.max(middleYval, points[i].y);
if (points[i].l) { // l property is true if label should be on for this point
return {
color: colour,
id: 'plotline'+i,
value: points[i].x,
width: 1,
};
}
}
}

Answer 3

ok, here is what I needed, lineColor:
$data = array(
"name" => $name,
"color" => '#00FFFF',
"lineColor"=> '#00FFFF',
"data" => $rows
);
that code goes in a local function called compileChartData in my php.
Thanks for the effort and sorry for the mixup.

Answer 4

you can change plotLines to target single line.
Or else you can change the whole Yaxis or Xaxis
xAxis: {
type: 'datetime',
gridLineColor: '#EEEEEE'
},
yAxis: {
title: {
text: 'Calls'
},
gridLineColor: '#EEEEEE'
}