JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html>
<head>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("[id*='txtMeasuringPoint']").change(function (e) {
reBuildChart();
});
reBuildChart();
});
function reBuildChart() {
var array = [];
$("[id*='txtMeasuringPoint']").each(function (i, element) {
array.push($(element).val() == '' ? "empty" : parseFloat($(element).val()));
});
BuildChart("ChartContainer", true, false, false, -10,10,-5,5,150,array, 716);
}
function BuildChart(divId, animationEnabled, exportEnabled, overview, minimumDev, maximumDev, warningMinDev, warningMaxDev, plateThickness, dataPoints, width) {
var average = GetAverage(dataPoints);
var zero = parseFloat((average - parseFloat(plateThickness)).toFixed(1));//203.2 - 200 = 3.2
var minValue = parseFloat((parseFloat(minimumDev) - zero).toFixed(1)); //-15 - 3.2 = -18.2
var maxValue = parseFloat((parseFloat(maximumDev) - zero).toFixed(1)); // 15 - 3.2 = 11.8
var warningMinValue = parseFloat((parseFloat(warningMinDev) - zero).toFixed(1));//-10 - 3.2 = -13.2
var warningMaxValue = parseFloat((parseFloat(warningMaxDev) - zero).toFixed(1)); // 10 - 3.2 = 6.8
var chart = new CanvasJS.Chart(divId,
{
animationEnabled: animationEnabled,
exportEnabled: exportEnabled,
backgroundColor: null,
height: overview ? 50 : 300,
width: overview ? 150 : width != undefined ? width: 900,
axisX: {
title: "",
labelFormatter: function (e) {
return " ";
},
lineThickness: 0,
tickThickness: 0
},
axisY: {
margin:0,
labelFormatter: function (e) {
if (overview) {
return "";
...
CSS
.textinput{
width: 30px;
display:block;
}