JSFiddle - React, Tailwind, and code Playground

by Anil Vangari

HTML

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

<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  "credits": {
    "text": "PRISM",
    "href": ""
  },
  "chart": {
    "type": "column"
  },
  "title": {
    "text": "Factor Contributions to CVaR"
  },
  "xAxis": {
    "categories": ["Adage US Large 130/30", "Alyeska (Aleutian)", "BBLS (HCIF)", "Blackrock FIGA", "Brevan Howard Fund", "Bridgewater PA Major Markets", "Portfolio"]
  },
  "yAxis": {
    "min": 0,
    "title": {
      "text": "Percent Contribution"
    },
    "stackLabels": {
      "enabled": true,
      "format": "{total:.2f}%",
      "style": {
        "fontWeight": "bold",
        "color": "gray"
      }
    }
  },
  "legend": {
    "align": "right",
    "x": -30,
    "verticalAlign": "top",
    "y": 25,
    "floating": false,
    "backgroundColor": "white",
    "borderColor": "#CCC",
    "borderWidth": 1,
    "shadow": false
  },
  "tooltip": {
    "headerFormat": "<b>{point.x}</b><br/>",
    "pointFormat": "{series.name}: {point.y:.2f}%<br/>Total: {point.stackTotal:.2f}%"
  },
  "plotOptions": {
    "column": {
      "stacking": "normal",
      "dataLabels": {
        "enabled": false,
        "format": "{point.y:.2f}%",
        "color": "white",
        "style": {
          "textShadow": "0 0 3px black"
        }
      }
    }
  },
  "series": [{
    "name": "US Low Volatility",
    "data": [0, 0, 0.7186183894804089, 0, 0, 0, null]
  }, {
    "name": "US Momentum",
    "data": [0.4879658729326748, 0, 0, -0.0554716359921682, -0.057620762094347244, 0, null]
  }, {
    "name": "US Quality",
    "data": [0, 0, 0, -0.0045395397990571525, 0, 0, null]
  }, {
    "name": "US Size",
    "data": [0, 0, -0.23407056725754694, 0, 0, 0, null]
  }, {
    "name": "US Value",
    "data": [0.24038914492571065, 0, 2.3415886997942317, 0, 0, 0, null]
  }, {
    "name": "Residual",
    "data": [-2.295209842997389, -0.12078571428571425, -1.8261057364094766, -0.4780064458261399, -1.3426718270372306, -0.4753457142857144, null]
  }]
});