JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

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

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{
	animationEnabled: true,
	theme: "light2",
	title:{
		text: "APPLICATION REPORT BY TYPE"
	},
	axisY2: {
		prefix: "",
		lineThickness: 0				
	},
	toolTip: {
		shared: true
	},
	legend:{
		verticalAlign: "top",
		horizontalAlign: "center"
	},
	data: [
	{     
		type: "stackedBar",
		showInLegend: true,
		name: "TERRACE",
		axisYType: "primary",
		color: "#581845",
		dataPoints: [
			{ x: 0, y: 3, label: "RESIDENTIAL" }
			
		]
	},
	{
		type: "stackedBar",
		showInLegend: true,
		name: "SEMI-D",
		axisYType: "primary",
		color: "#900C3F",
		dataPoints: [
			{ x: 0, y: 3, label: "RESIDENTIAL" }
		]
	},
	{
		type: "stackedBar",
		showInLegend: true,
		name: "DETACHED",
		axisYType: "primary",
		color: "#C70039",
		dataPoints: [
			{ x: 0, y: 3, label: "RESIDENTIAL" }
		]
	} ,
	{
		type: "stackedBar",
		showInLegend: true,
		name: "FLAT",
		axisYType: "primary",
		color: "#FF5733",
		dataPoints: [
			{ x: 0, y: 3, label: "RESIDENTIAL" }
		]
	} ,
	{
		type: "stackedBar",
		showInLegend: true,
		name: "APT",
		axisYType: "primary",
		color: "#FFC300",
		dataPoints: [
			{ x: 0, y: 3, label: "RESIDENTIAL" }
		]
	},
	{
		type: "stackedBar",
		showInLegend: true,
		name: "CONDO",
		axisYType: "primary",
		color: "#DAF7A6",
		dataPoints: [
			{ x: 0, y: 3, label: "RESIDENTIAL" }
		]
	},
	{
		type: "stackedBar",
		showInLegend: true,
		name: "LOW COST PLUS",
		axisYType: "primary",
		color: "#808000",
		dataPoints: [
			{ x: 0, y: 3, label: "RESIDENTIAL" }
		]
	},
	{
		type: "stackedBar",
		showInLegend: true,
		name: "LOW COST",
		axisYType: "primary",
		color: "#00FF00",
		dataPoints: [
			{ x: 0, y: 3, label: "RESIDENTIAL" }
		]
	},	
	{
		type: "stackedBar",
		showInLegend: true,
		name: "TOWN HOUSE",
		axisYType: "primary",
		color: "#008800",
		dataPoints: [
			{ x: 0, y: 3, label: "RESIDENTIAL" }
		]
	},
	{
		type: "stackedBar",
		showInLegend: true,
		name: "SHOPHOUSES",
		//axisYType: "secondary",
		color:...