JSFiddle - React, Tailwind, and code Playground

by jeffgw

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="ptsd" style="height:130px;"></div>
<div id="mdd" style="height:130px;"></div>
<div id="anx" style="height:130px;"></div>

JavaScript

function score (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var options = {
    chart: {
        marginTop: 40,
        inverted: true,
        marginLeft: 100,
        type: 'bullet'
    },
    plotOptions: {
        series: {
        		dataLabels:{
            	enabled:true,
              format: '{y}%'
            },
            pointPadding: 0.25,
            borderWidth: 0,
            color: '#000',
            targetOptions: {
                width: '200%'
            }
        }
    },
    credits: {
        enabled: false
    },
     legend: {
        enabled: false
    },
    title: {
        text: null
    },
    xAxis: {
        categories: []
    },
    yAxis: {
    		gridLineWidth: 0,
        max:80,
        plotBands: [{
            from: 0,
            to: 0,
            color: 'red'
        }, {
            from: 30,
            to: 40,
            color: 'yellow'
        }, {
            from: 40,
            to: 100,
            color: 'green'
        }],
        title: null
    },
    series: [{
        data: [{
            y: 45,
            target: 0
        }]
    }],
    tooltip: {
        pointFormat: '<b>{point.y}%</b>'
    }
}

var config = [{
		measure:'ptsd',
    label:'PTSD',
    red:[0,30],
    amber:[30,40],
    green:[40,100]
},{
		measure:'mdd',
    label:'MDD',
    red:[0,40],
    amber:[40,60],
    green:[60,100]
},{
		measure:'anx',
    label:'Anxiety',
    red:[0,40],
    amber:[40,60],
    green:[60,100]
}]

$.each(config, function( index, value ){
		var cfg = options;
    cfg.xAxis.categories = [value.label];
    cfg.yAxis.plotBands[0].from = value.red[0];
    cfg.yAxis.plotBands[0].to = value.red[1];
    cfg.yAxis.plotBands[1].from = value.amber[0];
    cfg.yAxis.plotBands[1].to = value.amber[1];
    cfg.yAxis.plotBands[2].from = value.green[0];
    cfg.yAxis.plotBands[2].to = value.green[1];
    cfg.series[0].data[0].y = score(20,60);
    
    
		Highcharts.chart(value.measure, cfg);
});