JSFiddle - React, Tailwind, and code Playground

by hironymous_vis

HTML

<!DOCTYPE html>
<html>
<head>
<style>
    .chart-container {
    width: 500px;
    height:200px;
    position: relative
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

</style>
</head>
<body>

<h2>Search Data</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Airport Name or Abbreviation...">

<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script type="text/javascript">

var ctx = document.getElementById('myChart').getContext('2d');
var chart1 = new Chart(ctx, {
    type: 'bar',
    data: {
        labels:  ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40],
        }]
    },

    // Configuration options go here
    options: {
      responsive:true,
      maintainAspectRatio: false,
        legend: {
            display: false
        },
        scaleShowValues: true,
        scales: {
            xAxes: [{
                ticks: {
                    autoSkip: false,
                    fontSize: 10
                }
            }]
        }
    },
    
});

//highlight bar that is selected

function highlightBar(s) {
    // this clears off any tooltip highlights
    chart1.update();
    chart1.activeElements = [];

    // reset any coloring because of selection
    chart1.datasets.forEach(function (dataset) {
        dataset.bars.forEach(function (bar) {
            if (bar.selected) {
                bar.backgroundColor = bar.selected.backgroundColor;
//                bar.strokeColor = bar.selected.strokeColor;
                delete bar.selected;
        ...