JSFiddle - React, Tailwind, and code Playground

by harifrais

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script> <!--doc here : http://numeraljs.com/-->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js'></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width:100%; height:100%;"></div>

JavaScript

$(function () {

        $('#container').highcharts({

            chart: {
                type: 'column',
                renderTo: 'container'
            },
            title: {
                text: 'Number of messages per Country'
            },
            rangeSelector: {
               enabled: true,
               inputEnabled: false,
               buttons: [{
                  type: 'month',
                  count: 3,
                  text: '3m'
               }, {
                  type: 'month',
                  count: 6,
                  text: '6m'
               }, {
                  type: 'month',
                  count: 12,
                  text: '12m'
               }, {
                  type: 'all',
                  text: 'All'
               }],
               selected: 3
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: { //custom date formats for different scales
                   second: '%H:%M:%S',
                   minute: '%H:%M',
                   hour: '%H:%M',
                   day: '%e. %b',
                   week: '%e. %b',
                   month: '%b-%Y', //month formatted as month only
                   year: '%Y'
                },
                title: {
                    text: 'month'
                },
                labels: {
                    rotation: 30,
                    align: 'left'
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'nb_msg'
                },
                labels: {
                   enabled: true,
                   formatter: function () {
                      return numeral(this.value).format('0.0a');
                   }
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme &&...