JSFiddle - React, Tailwind, and code Playground

by Anjali Jain

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="width:100%; height:400px"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{
title: {
	text: "non numeric data",
},
axisY:{
	valueFormatString: " ",
    tickColor: "transparent",
	stripLines:[
	{
		startValue:5,
		endValue:8,                
		color:"#FFFFFF",
		label : "Basic",
		labelFontColor: "#000000",
	},
	{
		value:15,
		endValue:18,                
		color:"transparent",
		label : "Minimal",
		labelFontColor: "#000000",
	},
	{
		startValue:25,
		endValue:28,                
		color:"#FFFFFF",
		label : "Proficient",
		labelFontColor: "#000000",
	},
	{
		startValue:35,
		endValue:38,                
		color:"#FFFFFF",
		label : "Advanced",
		labelFontColor: "#000000",
	}
	]
},
axisX: {
    tickLength: 10,
    maximum: 10,
    tickColor: "transparent",
	valueFormatString: " ",
	stripLines:[
    {
        startValue:1,
        endValue:3,                        
        color:"transparent",
        label: "Tier1",
    },
	{
		startValue:4,
		endValue:6,                
		color:"#FFFFFF",
		label: "Tier2",
	},
	{
		startValue:7,
		endValue:10,                
		color:"#FFFFFF",
		label: "Tier3",
	},
    {
        thickness: 1,        
        value: 3,		
		color:"grey",		
	},
    {
        thickness: 1,        
        value: 6,		
		color:"grey",		
	},
        
    {
        thickness: 1,        
        value: 10,		
		color:"grey",
	}
	],
},
data: [
{
	type:"scatter",
	fillOpacity: 1,
	dataPoints: [
		{ x: 1, y: 1 },
        { x: 2, y: 19 },
		{ x: 3, y: 12 },
		{ x: 4, y: 27 },
		{ x: 5, y: 14 },
		{ x: 6, y: 25 },
		{ x: 7, y: 36 },
		{ x: 8, y: 7  },
		{ x: 9, y: 18 },
		{ x: 10, y: 25},
        
	]
}
],			
});
chart.render();