CODEWITHSUNDEEP
javascriptchartshighcharts
Ludwig
Ludwig

Reputation: 1781

Highcharts - plotLines won't render

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

Upvotes: 1

Views: 303

Answers (1)

wergeld
wergeld

Reputation: 14442

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.

Upvotes: 2

Related Questions