JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<script src="//code.highcharts.com/stock/highstock.src.js"></script>
<div id="cht"></div>

JavaScript

var json = [{
    "name": "Currency Allocation",

        "data": [
        ["gbp", 0.7053985],
        ["gbp", 1.222985],
        ["usd", 0.17856322],
        ["eur", 0.06901525],
        ["chf", 0.00135777],
        ["jpy", 0.00815169],
        ["em_asia", 0.02821377],
        ["other", 0.00982446]
    ]
}];

$(function () {
    currency_chart = new Highcharts.Chart({
    colors: ['red','blue','yellow','pink','green'],
        "title": {
            "text": "Currency Allocation"
        },
        "chart": {
    "type": 'column'
  },
            "legend": {
            "enabled": true
        },
        "plotOptions": {
    "column": {
      "stacking": 'normal'
    }
  },
            "chart": {
            "renderTo": "cht",
                "type": "column"
        },
            "series": json,
            "yAxis": {
            "labels": {
                "formatter": function () {
                    return (this.value * 100) + "%";
                }
            }
        },
        "xAxis": {
            "categories":['t','y','e']
        },
            "tooltip": {
            "formatter": function () {
                return "<b>" + this.x + ": </b>" + Highcharts.numberFormat(100 * this.y, 1) + "%";
            }
        }
    });
});