JSFiddle - React, Tailwind, and code Playground

by Joanna Sobańska

HTML

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

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

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
           text: 'Top 10 Trading Pairs'
        },
                colors:["rgb(37,102,118)", "rgb(114,229,239)", 			   "rgb(47,66,133)", "rgb(202,211,250)", "rgb(34,130,245)", "rgb(48,88,252)","rgb(112,165,193)"],
        xAxis: {
             categories: ['Argentina', 'China', 'Brazil', 'India', 'Japan','Vietnam','Brazil','Maleysia','Indonesia','Algeria','South America','Poland','Spain','Uruguay','Peru']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'tonnage ( mt ) '
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
            shared: true
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
    series: [{
      name: 'Wheat',
      data: [500, 300, 400, 700, 200,300,444,333,222,555,100,123]
    }, {
      name: 'Soybeans',
      data: [200, 200, 500, 600, 100,333,222,111,44,6,3,99,444,333]
    }, {
      name: 'Barley',
      data: [100, 400, 800, 500, 300,500, 600, 100,333,222,111,456,333,222]
    },
     {
      name: 'Corn',
      data: [100, 400, 800, 500, 300,500, 600, 100,333,222,111,456,333,222]
    },
             {
      name: 'Soymeal',
      data: [100, 400, 800, 500, 300,500, 600, 100,333,222,111,456,333,222]
    },
             {
      name: 'Biodiesel',
      data: [10, 200, 300, 400, 500,300, 200, 100,132,222,111,156,133,122]
    },
    
    
    ]
    });
});