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}'
        }
        }]
    });
});

Answer 1

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.