JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://agrisphere-portal.com/agCharts/cdn/agCharts.api.js"></script>
<link rel="stylesheet" href="https://agrisphere-portal.com/agCharts/cdn/agCharts.css">
<canvas id="barchart-1" touch-action="none"></canvas>

CSS

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
}

div.relative{
  position: relative;
  height: 100%;
}

canvas#barchart-1{

	width: 100%;

	/* need 100% height for fullscreen
	use the parent height to control 
	the canvas height  when not in fullscreen */

	height: 100%; 

}

JavaScript

var barChart1 = new agCharts("bar",

	{

	labelMode: 1, // 0 - 3 are possible values
	labelTrending: true, // true or false, when true it shows trends between records ignoring the first record
	nLabel: "Month", // name of the samples
	vLabel: "User Logins", // value being measured

	// lighting

	lightFollowCamera: true,
	lightColor: "#ffffff",

	// behaviors

	fullscreenEnabled: true,

	// styles

	shape: "box",
	renderEdges: true,
	edgeColor: "#0000ff",
	glow: true,
	flatShaded: false,


	background: "#000000",
	color: "#ffffff",

	// the dataset

	dataSet: [
		{
		"name": "January",
		"value": 89,
		"color": "#FFCC99"
	  },
	  {
		"name": "February",
		"value": 189,
		"color": "#FF6622"
	  },
	  {
		"name": "March",
		"value": 49,
		"color": "#FF1199"
	  },
	  {
		"name": "April",
		"value": 129,
		"color": "#22CC99"
	  },
	  {
		"name": "May",
		"value": 119,
		"color": "#bbCC99"
	  },
	  {
		"name": "June",
		"value": 155,
		"color": "#dd8899"
	  },
	  {
		"name": "July",
		"value": 199,
		"color": "#22ee44"
	  },
	  {
		"name": "August",
		"value": 211,
		"color": "#66CC99"
	  },
	  {
		"name": "September",
		"value": 339,
		"color": "#22BB99"
	  },
	  {
		"name": "October",
		"value": 229,
		"color": "#22CCBB"
	  },
	  {
		"name": "November",
		"value": 231,
		"color": "#BBCCBB"
	  },
	  {
		"name": "December",
		"value": 422,
		"color": "#CCCC99"
	  }

	]

  },

  // the ID of the canvas element to render to

  "barchart-1"

);