Highcharts - plotLines won't render

Question

I have set up highchart options for the same type of highcharts, that I am using on one page. Everything works fine but the one thing, it won't render plotLines for the charts. I am not sure if I have set up everyting right. You can see what I have done here. And here below is my script:

$(function () {

    Highcharts.setOptions({
        chart: {
            type: 'boxplot'
        },
        title: {
          useHTML: true,
        },
        legend: {
          enabled: false
        },
        xAxis: {
          categories: ['2011', '2012', '2013', '2014', '2015'],
          title: {
              text: 'Experiment No.'
          }
        },
        yAxis: {
          plotLines: [{
            color: 'red',
            width: 1,
            label: {
                align: 'center',
                style: {
                    color: 'gray'
                }
            }
          }]
        },
        series: [{
          color: Highcharts.getOptions().colors[0],
          type: 'scatter',
          marker: {
              fillColor: 'white',
              lineWidth: 1,
              lineColor: Highcharts.getOptions().colors[0]
          }
        }]
    });

var chart1 = new Highcharts.Chart({
    chart: {
      renderTo: 'indikator1',
    },
    title: {
      text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon'
    },
    yAxis: {
      title: {
        text: 'Verdi'
      },
      plotLines: [{
        value: 932,
        label: {
            text: 'Theoretical mean: 932',
        }
      }]
    },

    series: [{
      name: 'Observations',
      data: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 806, 871, 950],
          [834, 836, 864, 882, 910]
      ],
      tooltip: {
          headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
        },
        {
        name: 'Outlier',
        data: [ // x, y positions where 0 is the first category
          [0, 644],
          [4, 718],
          [4, 951],
          [4, 969]
        ],
        tooltip: {
          pointFormat: 'Observation: {point.y}'
        }
        }]
    });

var chart2 = new Highcharts.Chart({
    chart: {
      renderTo: 'indikator2',
    },
    title: {
      text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon'
    },
    yAxis: {
      title: {
        text: 'Verdi'
      },
      plotLines: [{
        value: 932,
        label: {
            text: 'Theoretical mean: 932',
        }
      }]
    },

    series: [{
      name: 'Observations',
      data: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 806, 871, 950],
          [834, 836, 864, 882, 910]
      ],
      tooltip: {
          headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
        },
        {
        name: 'Outlier',
        data: [ // x, y positions where 0 is the first category
          [0, 644],
          [4, 718],
          [4, 951],
          [4, 969]
        ],
        tooltip: {
          pointFormat: 'Observation: {point.y}'
        }
        }]
    });

var chart3 = new Highcharts.Chart({
    chart: {
      renderTo: 'indikator3',
    },
    title: {
      text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon'
    },
    yAxis: {
      title: {
        text: 'Verdi'
      },
      plotLines: [{
        value: 932,
        label: {
            text: 'Theoretical mean: 932',
        }
      }]
    },

    series: [{
      name: 'Observations',
      data: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 806, 871, 950],
          [834, 836, 864, 882, 910]
      ],
      tooltip: {
          headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
        },
        {
        name: 'Outlier',
        data: [ // x, y positions where 0 is the first category
          [0, 644],
          [4, 718],
          [4, 951],
          [4, 969]
        ],
        tooltip: {
          pointFormat: 'Observation: {point.y}'
        }
        }]
    });

var chart4 = new Highcharts.Chart({
    chart: {
      renderTo: 'indikator4',
    },
    title: {
      text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon'
    },
    yAxis: {
      title: {
        text: 'Verdi'
      },
      plotLines: [{
        value: 932,
        label: {
            text: 'Theoretical mean: 932',
        }
      }]
    },

    series: [{
      name: 'Observations',
      data: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 806, 871, 950],
          [834, 836, 864, 882, 910]
      ],
      tooltip: {
          headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
        },
        {
        name: 'Outlier',
        data: [ // x, y positions where 0 is the first category
          [0, 644],
          [4, 718],
          [4, 951],
          [4, 969]
        ],
        tooltip: {
          pointFormat: 'Observation: {point.y}'
        }
        }]
    });

var chart5 = new Highcharts.Chart({
    chart: {
      renderTo: 'indikator5',
    },
    title: {
      text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon'
    },
    yAxis: {
      title: {
        text: 'Verdi'
      },
      plotLines: [{
        value: 932,
        label: {
            text: 'Theoretical mean: 932',
        }
      }]
    },

    series: [{
      name: 'Observations',
      data: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 806, 871, 950],
          [834, 836, 864, 882, 910]
      ],
      tooltip: {
          headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
        },
        {
        name: 'Outlier',
        data: [ // x, y positions where 0 is the first category
          [0, 644],
          [4, 718],
          [4, 951],
          [4, 969]
        ],
        tooltip: {
          pointFormat: 'Observation: {point.y}'
        }
        }]
    });

var chart6 = new Highcharts.Chart({
    chart: {
      renderTo: 'indikator6',
    },
    title: {
      text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon'
    },
    yAxis: {
      title: {
        text: 'Verdi'
      },
      plotLines: [{
        value: 932,
        label: {
            text: 'Theoretical mean: 932',
        }
      }]
    },

    series: [{
      name: 'Observations',
      data: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 806, 871, 950],
          [834, 836, 864, 882, 910]
      ],
      tooltip: {
          headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
        },
        {
        name: 'Outlier',
        data: [ // x, y positions where 0 is the first category
          [0, 644],
          [4, 718],
          [4, 951],
          [4, 969]
        ],
        tooltip: {
          pointFormat: 'Observation: {point.y}'
        }
        }]
    });

var chart7 = new Highcharts.Chart({
    chart: {
      renderTo: 'indikator7',
    },
    title: {
      text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon'
    },
    yAxis: {
      title: {
        text: 'Verdi'
      },
      plotLines: [{
        value: 932,
        label: {
            text: 'Theoretical mean: 932',
        }
      }]
    },

    series: [{
      name: 'Observations',
      data: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 806, 871, 950],
          [834, 836, 864, 882, 910]
      ],
      tooltip: {
          headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
        },
        {
        name: 'Outlier',
        data: [ // x, y positions where 0 is the first category
          [0, 644],
          [4, 718],
          [4, 951],
          [4, 969]
        ],
        tooltip: {
          pointFormat: 'Observation: {point.y}'
        }
        }]
    });

var chart8 = new Highcharts.Chart({
    chart: {
      renderTo: 'indikator8',
    },
    title: {
      text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon'
    },
    yAxis: {
      title: {
        text: 'Verdi'
      },
      plotLines: [{
        value: 932,
        label: {
            text: 'Theoretical mean: 932',
        }
      }]
    },

    series: [{
      name: 'Observations',
      data: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 806, 871, 950],
          [834, 836, 864, 882, 910]
      ],
      tooltip: {
          headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
        },
        {
        name: 'Outlier',
        data: [ // x, y positions where 0 is the first category
          [0, 644],
          [4, 718],
          [4, 951],
          [4, 969]
        ],
        tooltip: {
          pointFormat: 'Observation: {point.y}'
        }
        }]
    });

var chart9 = new Highcharts.Chart({
    chart: {
      renderTo: 'indikator9',
    },
    title: {
      text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon'
    },
    yAxis: {
      title: {
        text: 'Verdi'
      },
      plotLines: [{
        value: 932,
        label: {
            text: 'Theoretical mean: 932',
        }
      }]
    },

    series: [{
      name: 'Observations',
      data: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 806, 871, 950],
          [834, 836, 864, 882, 910]
      ],
      tooltip: {
          headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
        },
        {
        name: 'Outlier',
        data: [ // x, y positions where 0 is the first category
          [0, 644],
          [4, 718],
          [4, 951],
          [4, 969]
        ],
        tooltip: {
          pointFormat: 'Observation: {point.y}'
        }
        }]
    });

var chart10 = new Highcharts.Chart({
    chart: {
      renderTo: 'indikator10',
    },
    title: {
      text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon'
    },
    yAxis: {
      title: {
        text: 'Verdi'
      },
      plotLines: [{
        value: 932,
        label: {
            text: 'Theoretical mean: 932',
        }
      }]
    },

    series: [{
      name: 'Observations',
      data: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 806, 871, 950],
          [834, 836, 864, 882, 910]
      ],
      tooltip: {
          headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
        },
        {
        name: 'Outlier',
        data: [ // x, y positions where 0 is the first category
          [0, 644],
          [4, 718],
          [4, 951],
          [4, 969]
        ],
        tooltip: {
          pointFormat: 'Observation: {point.y}'
        }
        }]
    });

var chart11 = new Highcharts.Chart({
    chart: {
      renderTo: 'indikator11',
    },
    title: {
      text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon'
    },
    yAxis: {
      title: {
        text: 'Verdi'
      },
      plotLines: [{
        value: 932,
        label: {
            text: 'Theoretical mean: 932',
        }
      }]
    },

    series: [{
      name: 'Observations',
      data: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 806, 871, 950],
          [834, 836, 864, 882, 910]
      ],
      tooltip: {
          headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
        },
        {
        name: 'Outlier',
        data: [ // x, y positions where 0 is the first category
          [0, 644],
          [4, 718],
          [4, 951],
          [4, 969]
        ],
        tooltip: {
          pointFormat: 'Observation: {point.y}'
        }
        }]
    });
});

by plotlines which lines exactly you mean? x-y axis? and for which chart you are not getting? — Parag Bhayani, May 19 '16 at 11:25
It is the red line that you can see on this example, and I am not getting it on any of the charts: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/box-plot/ — Ludwig, May 19 '16 at 11:30
Ohkey you mean an average line... okey looking into it, you are looking into this library, http://www.highcharts.com/demo right? — Parag Bhayani, May 19 '16 at 11:32
yes, I was following their example for setting up highchart options here: http://www.highcharts.com/docs/getting-started/how-to-set-options — Ludwig, May 19 '16 at 11:37

score 2 · Accepted Answer · edited May 23 '17 at 12:08

You need to set the options individually in your charts. The global options are not being overwritten by each of your chart's settings - but in your individual chart your are not setting color or the line's width. Remove the plotLines from the global options section and only do it in each chart's section.

To handle merging of object properties you can use this question. Here is a rough and ready sample:

function merge_options(obj1,obj2){
    var obj3 = {};
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
    return obj3;
}

var plotLinesOption = {
                width: 1,
                color: 'red'
      };

    Highcharts.setOptions({
        chart: {
            type: 'boxplot'
        },
        title: {
          useHTML: true,
        },
        legend: {
          enabled: false
        },
        xAxis: {
          categories: ['2011', '2012', '2013', '2014', '2015'],
          title: {
              text: 'Experiment No.'
          }
        },
        series: [{
          color: Highcharts.getOptions().colors[0],
          type: 'scatter',
          marker: {
              fillColor: 'white',
              lineWidth: 1,
              lineColor: Highcharts.getOptions().colors[0]
          }
        }]
    });

var chart1 = new Highcharts.Chart({
    chart: {
      renderTo: 'indikator1',
    },
    title: {
      text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon'
    },
    yAxis: {
      title: {
        text: 'Verdi'
      },
      plotLines: [merge_options(plotLinesOption,{value: 932, label:{text: 'Theoretical mean: 932'}})]
    },

    series: [{
      name: 'Observations',
      data: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 806, 871, 950],
          [834, 836, 864, 882, 910]
      ],
      tooltip: {
          headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
        },
        {
        name: 'Outlier',
        data: [ // x, y positions where 0 is the first category
          [0, 644],
          [4, 718],
          [4, 951],
          [4, 969]
        ],
        tooltip: {
          pointFormat: 'Observation: {point.y}'
        }
        }]
    });

And a live demo. Note I only updated chart1.

Here is version using Highcharts.merge() function instead of external function.

So, there is no way I can set global plotLines options and add custom plotLines options individually? — Ludwig, May 19 '16 at 11:46
You could create an object that is generally like the formatting you want and then merge your options in (like `value` and `text`) then add that object to the `plotLines` array. — wergeld, May 19 '16 at 11:47
If it is not too much of a problem, could you show an example of that? — Ludwig, May 19 '16 at 11:48
Instead of custom function, you can use Highcharts.merge() function. — Sebastian Bochan, May 19 '16 at 12:13
@SebastianBochan, right! I forgot about that one. Does the same thing. — wergeld, May 19 '16 at 12:14

Highcharts - plotLines won't render

1 Answers1