Pear-PseudoGroup

by Shuaib Khan

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

Highcharts.setOptions({
	  lang: {
	    'thousandsSep': ','
	  }
	});

	Highcharts.chart('container', {
	  "chart": {
	    "credits": "disabled",
	    "exporting": "disabled",
	    "type": "line",
	    "backgroundColor": "#FFFFFF",
	    "borderWidth": 0,
	    "height": 340,
	    "width": 600,
	    "marginTop": 30,
	    "marginBottom": 40,
	    "marginRight": 30,
	    "marginLeft": 70,
	    "plotBorderWidth": 1,
	    "plotBorderColor": "black",
	  },
	  "navigation": {
	    "buttonOptions": {
	      "enabled": false,
	    },
	  },
	  "title": {
	    "text": null
	  },
	  xAxis: {
	    title: {
	      text: null,
	    },
	    lineWidth: 1,
	    lineColor: "black",
	    tickPositions: [0, 3, 7, 11, 14],
	    tickColor: "black",
	    gridLineColor: "black",
	    labels: {
	      enabled: true,
	      "align": "left",
	      style: {
	        color: "black",
	        fontWeight: "300",
	      },
	    },
	    categories: ["2013", "2013", "2013", "2014", "2014", "2014", "2014", "2015", "2015", "2015", "2015", "2016", "2016", "2016", "2017", "2017"]
	  },
	  yAxis: {
	    title: {
	      text: null,
	    },
	    lineWidth: 1,
	    lineColor: "black",
	    gridLineColor: "black",
	    labels: {
	      enabled: true,
	      format: "${value:,0f}",
	      style: {
	        color: "black",
	        fontWeight: "300",
	      },
	    }
	  },
	  legend: {
	    layout: "vertical",
	    align: "left",
	    verticalAlign: "top",
	    floating: true,
	    x: 45,
	    y: 15
	  },
	  plotOptions: {
	    series: {
	      label: {
	        enabled: false
	      },
	      marker: {
	        enabled: false
	      }
	    },
	  },
	  series: [{
	    name: "Risk Parity EM Cumulative",
	    data: [10000, 10127, 10085, 10164, 10677, 10479, 9733, 9693, 9633, 8149, 7980, 8755, 8634, 8936, 8480, 9232],
	    color: "#C6CED9",
	  }, {
	    name: "MSCI EMG MKT Cumulative",
	    data: [10000, 10590, 10786, 10747, 11468, 11082, 10590, 10832, 10921, 8979, 9044, 9564, 9641, 10523, 10094, 11254],
	   ...