JSFiddle - React, Tailwind, and code Playground

by KomathiKarunakaran

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; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
var data = [
                ['1', 21],
                ['2', 70],
                ['3', 99],
                ['4', 102],
                ['5', 106],
                ['6', 112],
                ['7', 143],
                ['8', 207],
                ['9', 386],
                ['10', 908]

            ];
    for(i=0;i<data.length;i++) {
    	if (data[i][1] < 100) {
      	data[i] = {x:i+1, y:data[i][1], dataLabels: { color:'#F5A623', y:-15}}
      }
    }
    $('#container').highcharts({
        chart: {
            type: 'column',
            backgroundColor: null,
            style: {
            fontFamily: 'helvetica, arial'
            }
        },
        colors:['#F5A623'],
        credits: false,
        title: {
            text: 'Attacks by Risk Score'
        },
        subtitle: {
            text: 'Number of malicious IPs seen in this period based on maximum risk score'
        },
        xAxis: {
            type: 'category',
            title: {
            text: "Risk Score"
            },
            labels: {
                rotation: 0,
                style: {
                    fontSize: '11px',
                    fontFamily: 'helvetica, arial, Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Number of IP Addresses'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        series: [{
            name: 'IPS',
            data: data,
            dataLabels: {
                enabled: true,
                rotation: 0,
                color: '#FFFFFF',
                align: 'right',
                y: 10, // 10 pixels down from the top
                style: {
                    fontSize: '10px',
                    fontFamily: 'helvetica, arial, sans-serif',
                    textShadow: false,
                    fontWeight: 'normal'

      ...