JSFiddle - React, Tailwind, and code Playground

by aspandit

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.min.js"></script>
<div id="placeholder" style="width:600px;height:300px;">
</div>

JavaScript

$(function () {
   var question1 = [[1,30],[2,12],[3,14],[4,19],[5,25]];
   var question2 = [[1,20],[2,32],[3,24],[4,14],[5,20]];
   var question3 = [[1,10],[2,22],[3,34],[4,12],[5,22]];
   
   // [question number,percent of teams score]
   var score0 = [[1,2],[2,7],[3,5]];
   var score1 = [[1,30],[2,20],[3,10]];
   var score2 = [[1,11],[2,18],[3,21]];
   var score3 = [[1,14],[2,24],[3,30]];
   var score4 = [[1,18],[2,11],[3,12]];
   var score5 = [[1,25],[2,20],[3,22]];
    
    $.plot($("#placeholder"),[
     {data: score0,
    	color: '#FF0000' },
     {data: score1,
    	color: '#ff6600' },
    {data: score2,
    	color: '#FFCC00' },
    {data: score3,
    	color: '#ccff00' },
      {data: score4,
    	color: '#66ff00' },
      {data: score5,
    	color: '#00FF00' }], {
				series: {
					stack: true,
					lines: {
						show: false,
						fill: true,
						steps: 0
					},
					bars: {
						show: true,
						barWidth: 0.6
					}
				}
			});
});