JSFiddle - React, Tailwind, and code Playground

HTML

<table id="source">
<caption>動作テスト</caption>
<thead>
<tr>
<th></th>
<th>やる気</th>
<th>休みたい気持ち</th>
<th>サボりたい気持ち</th>
</tr>
</thead>
<tbody>
<tr>
<th>今日</th>
<td>80</td>
<td>40</td>
<td>20</td>
</tr>
<tr>
<th>明日</th>
<td>50</td>
<td>60</td>
<td>40</td>
</tr>
<tr>
<th>明後日</th>
<td>10</td>
<td>80</td>
<td>60</td>
</tr>
<tr>
<th>明々後日</th>
<td>1</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
</table>

<div id="target"></div>

CSS

table {
			border-collapse: collapse;
    width：500px；
		}
		caption {
			background: #ddd;
		}
		th {
			background: #333;
			border: 1px solid #ccc;
			color: #ffffff;
			font-weight: bold;
			text-align: left;
			padding: 3px;
		}
		td {
			border: 1px solid #ccc;
			text-align: left;
			font-weight: normal;
			color: #333;
			padding: 3px;
		}
		tr:nth-child(odd) {
			background: #ffffff;
		}
		tbody tr:nth-child(odd) th {
			background: #ffffff;
			color: #333;
		}
		tr:nth-child(even) {
			background: #eee;
		}
		tbody tr:nth-child(even) th {
			background: #ddd;
			color: #333;
		}
		#target {
			width: 400px;
			height: 400px;
margin: 0;
		}
#target ul {
margin: 0px;
list-style: none outside none;
}

.caption {
    display: block;
    text-align: center;
    font-weight: bold;
    height: 40px;
}

.graph {
    position: relative;
    float: right;
}

.graph ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.legend {
    background: #f0f0f0;
    border-radius: 4px;
    bottom: 0;
    position: relative;
    text-align: left;
    width: 100%;
}

.legend li {
    display: block;
    float: left;
    height: 20px;
    margin: 0;
    padding: 10px 20px;
}

.legend span.icon {
    background-position: 50% 0;
    border-radius: 2px;
    display: block;
    float: left;
    height: 16px;
    margin: 2px 10px 0 0;
    width: 16px;
}

.x-axis {
    bottom: 0;
    color: #555;
    position: absolute;
    text-align: center;
}

.x-axis li {
    float: left;
    margin: 0 10px;
}

.y-axis {
    color: #555;
    position: absolute;
    text-align: left;
}

.y-axis ul {
    padding: 0px;
    margin: 0px;
}

.y-axis li {
    border-top: 1px solid #ccc;
    display: block;
}

.y-axis li span {
    display: block;
    position: relative;
    text-align: right;
}

.bars {
    position: absolute;
    width: 100%;
    z-index: 10;
}

.bar-group {
    float: left;
    height: 100%;
    position: relative;
    margin: 0 10px;
}

.bar {
    bottom: 0;
   ...

JavaScript

/**
 * Table Bar Chart jQuery plugin 1.0
 * 
 * Copyright (c) 2014, AIWSolutions
 * License: GPL2
 * Project Website: http://wiki.aiwsolutions.net/Snld9
 **/

jQuery.fn.tableBarChart = function(targetDiv, caption, reverseGroup) {
	var source = $(this);
	var target = $(targetDiv);
	var maxValue = 0;
	var minValue = Number.MAX_VALUE;
	var yAxisMax = 0;
	var yAxisMin = 0;
	var groupTitles = [];
	var legends = [];
	var tableData = [];

	function getHeaderNames(isColumn) {
		var parentNode = isColumn ? 'thead' : 'tbody';
		var names = [];
		source.find(parentNode + ' th').each(function(index, element) {
			// skip first cell
			if (index > 0 || isColumn === undefined || !isColumn) {
				names.push($(element).text());
			}
		});
		return names;
	}

	function getDataByRow() {
		var dataMatrix = [];
		source.find('tbody tr').each(function(i, trElement) {
			var rowValue = [];
			$(trElement).find('td').each(function(j, tdElement) {
				var intValue = parseInt($(tdElement).text());
				if (intValue > maxValue) {
					maxValue = intValue;
				} else if (intValue < minValue) {
					minValue = intValue;
				}
				rowValue.push(intValue);
			});
			dataMatrix.push(rowValue);
		});
		return dataMatrix;
	}

	function getDataByColumn() {
		var dataMatrix = [];
		var numCols = source.find('tbody tr:eq(0) td').size();
		for (var i = 0; i < numCols; i++) {
			var colValue = [];
			source.find('tbody tr').each(function() {
				var intValue = parseInt($($(this).find('td:eq(' + i + ')')[0]).text());
				if (intValue > maxValue) {
					maxValue = intValue;
				} else if (intValue < minValue) {
					minValue = intValue;
				}
				colValue.push(intValue);
			});
			dataMatrix.push(colValue);
		}
		return dataMatrix;
	}

	function getCaption() {
		if (caption === undefined || caption.length === 0) {
			caption = '';
			source.find('caption').each(function() {
				caption = $(this).text();
			});
		}
		return caption;
	}

	function getAxisHTML(sourceArray, cssClass) {
		var axis = $('<ul...