JSFiddle - React, Tailwind, and code Playground

by ushak

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>

JavaScript

window.onload = function() { 
 
var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	title: {
		text: "Tuna Production"
	},
	axisY: {
		title: "in metric tons",
                gridThickness: 0,
	        tickLength: 0,
                includeZero: true,
                suffix: "%"
	},
	data: [{
		type: "column",
		toolTipContent: "{y} %",
		dataPoints: dataPoints,
                tickLength: 10
	}]
});

 
$.get("https://canvasjs.com/data/gallery/jsp/tuna-production.csv", getDataPointsFromCSV);
 
//CSV Format
//Year,Volume
function getDataPointsFromCSV(csv) {
	var points;
	var csvLines = csv.split(/[\r?\n|\r|\n]+/);
	for (var i = 1; i < csvLines.length; i++) {
		if (csvLines[i].length > 0) {
			points = csvLines[i].split(",");
			dataPoints.push({
				label: points[0],
				y: parseFloat(points[1])
			});
		}
	}
	chart.render();
}
}