how to : specify colors for multiple axes chart?

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;
}

collections of points to be plotted - one for an open event another for a click event. the points get plotted correctly, bit I can't seem to change the color of the plot lines. they two lines also have differently colored areas underneath. — lost baby, Jul 05 '12 at 19:48
This is not possible as of yet. I was also looking to change x-axis lines color. But it doesnt work. Works only if you specify value for single line ==> xAxis.plotLines: {color: '', value: 'VALUE OF LINE ON AXIS'} — STEEL, Mar 06 '14 at 13:38

wergeld · Answer 1 · 2012-07-05T18:24:35.890

2

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

edited Jul 05 '12 at 18:24

answered Jul 05 '12 at 18:03

wergeld

14,332
8
51
81

I meant the plotlines, one for the pointsopens and one for pointsclicks. – lost baby Jul 05 '12 at 18:17
sorry, my terminology was all wrong, the color of the lines for a series is what i want to color - the lines connecting all the data points on the chart. I am using an area chart so I can specify the color under the lines but what about the lines themselves, right now all lines are colored blue. – lost baby Jul 06 '12 at 15:04

Ricardo Alvaro Lohmann · Answer 2 · 2012-07-05T19:29:27.950

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,

            };
        }
    }
}

interesting, i tried it (see my edited OP) but no luck so far. — lost baby, Jul 05 '12 at 19:08
tried that too, still no luck. Thanks for trying, I wonder if maybe something is overwriting the color. — lost baby, Jul 05 '12 at 20:27
@Calgacus Can you edit your answer and include `pointsopens` and `pointsclicks` ? — Ricardo Alvaro Lohmann, Jul 06 '12 at 03:03
DOH!! I messed this one up by using the wrong terminology - I don't even want plotlines - I want the colors for the different series lines to be different. One line for 'open events per day' the other for 'click events per day'. Sorry. — lost baby, Jul 06 '12 at 14:17

lost baby · Answer 3 · 2012-07-06T18:19:36.223

0

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.

edited Jul 06 '12 at 18:19

answered Jul 06 '12 at 17:53

lost baby

3,178
4
32
53

score 0 · Answer 4 · answered Mar 06 '14 at 13:43

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'
        }

how to : specify colors for multiple axes chart?

4 Answers4