JSFiddle - React, Tailwind, and code Playground

by Casey Rule

HTML

<script src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.barRenderer.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.pointLabels.js"></script>
<link rel="stylesheet" href="http://www.jqplot.com/src/jquery.jqplot.min.css">
<div id="chart1"></div>

CSS

#chart1 {
    height: 100px;
}

JavaScript

var plot1 = $.jqplot('chart1', [[ 369 ]], {
    seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {
            barDirection: 'horizontal'
        },
        xaxis: 'x2axis'
    },
    axes: {
        x2axis: {
            max: 1000,
            min: 0,
            numberTicks: 11,
            tickOptions: {formatString: '%d'}
        },
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: [''],
            showTicks: false
        }
    }
});