JSFiddle - React, Tailwind, and code Playground

by jms_a88

HTML

<script src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.barRenderer.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.pointLabels.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.highlighter.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.cursor.min.js"></script>
<div style="width:100%;float:left;clear:left;">
    <div class="fl cl type50" id="newBarChart" style="height:350px;width:70%;float:left;"></div>
</div>

JavaScript

var v1 = [100,100,81,60,100,54];
            var v2 = [0,0,19,40,0,46]

            var hticks = ['Social Networking','Regional Directories','Local Search','Internet Yellow Pages','Directory Assistance','Category Specific'];
            var plot1 = $.jqplot('newBarChart', [v1, v2], {
                stackSeries: true,
                seriesDefaults:{
                    renderer:$.jqplot.BarRenderer,
                    rendererOptions: {
                        barPadding: 10,
                        barMargin: 10,
                        barWidth: 30,
                        barDirection: 'horizontal',
                        highlightMouseOver: true  
                    },
                    pointLabels: {
                        show: true, 
                        location: 'e',
                        stackedValue: true,
                        labels: ['1','2','3','4','5','6']
                    }
                },
                grid: {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    borderWidth: 0,
                    shadow: false,
                    renderer: $.jqplot.CanvasGridRenderer 
                },
                cursor:{
                    show: true,
                    showTooltip: true,
                    //followMouse: true,
                    showTooltipOutsideZoom: false,
                    constrainOutsideZoom: true
                },
                axesDefaults: {
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    tickOptions: {
                        fontSize: '10pt'
                    }
                },
                axes: {
                    xaxis: {
                        min: 0,
                        max: 100,
                        numberTicks : 11,
                        tickOptions: {
                            formatString: "%d"
                        }
                    },
                    yaxis: {
  ...