JSFiddle - React, Tailwind, and code Playground

by wergeld

HTML

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="indikator1" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
<div id="indikator2" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
<div id="indikator3" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
<div id="indikator4" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
<div id="indikator5" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
<div id="indikator6" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
<div id="indikator7" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
<div id="indikator8" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
<div id="indikator9" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
<div id="indikator10" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
<div id="indikator11" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>

JavaScript

$(function () {
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}'
      	}
    	}]
  	});
    
var chart2 = new Highcharts.Chart({
    chart: {
      renderTo: 'indikator2',
    },
    title: {
      text: '<i...