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', {
  "title": {
    "floating": false,
    "text": ""
  },
  "xAxis": {
    "categories": ["North America", "European Union", "Non-European Union", "Japan", "Asia excluding Japan", "Emerging Europe", "Latin America", "Africa"],
    "title": {
      "text": null,
      "style": {}
    },
    "dateTimeLabelFormats": {},
    "labels": {
      "enabled": true,
      "style": {
        "fontWeight": "bold",
        fontSize: "150%",
        "color": "#000000"
      },
      "autoRotation": [-45]
    },
    "lineWidth": 0.0,
    "tickWidth": 0.0
  },
  "yAxis": {
    "title": {
      "text": null,
      "style": {}
    },
    "dateTimeLabelFormats": {},
    "labels": {
      "enabled": false,
      "style": {
        "fontWeight": "bold",
        "color": "#000000"
      },
      "autoRotation": [-45]
    },
    "lineWidth": 0.0,
    "tickWidth": 1.0,
    "gridLineColor": "#FFFFFF"
  },
  "series": [{
    "name": "",
    "data": [2.8, 0.2, 0.0, 0.0, -0.7, -0.5, -0.9, -1.0],
    "color": "#91D150",
    "negativeColor": "#00B1F1",
    "showInLegend": false
  }],
  "chart": {
    "type": "bar",
    "height": 450,
    "width": 435
  },
  "credits": false,
  "plotOptions": {
    "series": {
      "lineWidth": 0.0
    },
    "bar": {
      "borderColor": "transparent",
      "dataLabels": {
        "enabled": true,
        style: {
        	fontSize: "120%"
        },
        "format": "{point.y:.1f}%"
      }
    },
    "column": {
      "borderColor": "transparent",
      "dataLabels": {
        "enabled": false
      }
    },
    "pie": {
      "dataLabels": {
        "style": {}
      }
    }
  },
  "legend": {
    "layout": "horizontal",
    "align": "center",
    "verticalAlign": "bottom",
    "floating": false
  }
});