JSFiddle - React, Tailwind, and code Playground

by Fairlight

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
   <div class="right">
       width: <form name="setCol">
            <select name="numOfCol" onChange="columnNumSet()">
                <option value="100%">100%</option>
                <option value="50%">50%</option>
                <option value="33.3%">33%</option>
                <option value="25%">25%</option>
                <option value="20%">20%</option>
            </select>
        </form>
    </div>


    <div class="grapharea">
            <canvas id="myChartA" class="myChart"></canvas>
    </div>
    <hr>

CSS

.grapharea {

            width: 400px;
            height: auto;
            display: inline-block;
            vertical-align: top;
            background-color: rgb(174, 214, 236);
            margin-bottom: 3px;
            padding: 2px;
            box-sizing: border-box;
        }

        .chart {
            display: float;
            width: 100%;
        }

        .myChart {
            width: 100%;
        }

JavaScript

var ctxA = document.getElementById("myChartA").getContext("2d");

let data_A1 = [
    {
        x: "2019-01-01 00:01:38",
        y: "13.0"
    },
    {
        x: "2019-01-01 01:01:39",
        y: "11.0"
    },
    {
        x: "2019-01-01 02:01:40",
        y: "16.0"
    },
    {
        x: "2019-01-01 03:01:41",
        y: "15.0"
    },
    {
        x: "2019-01-01 04:01:42",
        y: "14.0"
    }
];


var myChartA = new Chart(ctxA, {
    type: 'line',
    data: {
        datasets: [
            {
                label: '1st Data',
                data: data_A1,
                borderColor: '#0f0',
                showLine: true
            }
        ]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormat: 'h:mm',
                }
            }]
        },
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            display: false
        }
    }
});

function columnNumSet() {
    obj = document.setCol.numOfCol;
    index = obj.selectedIndex;
    width = obj.options[index].value;
    console.log('width', width);
    $('.grapharea').css('width', width);            
}

$(document).ready( function(){
var elements = document.setCol.numOfCol.options;
elements[2].selected = true;
$('.grapharea').css('width', elements[0].value);
});