JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<div style="background:radial-gradient(ellipse at center, #6c7d84 0%, #2C434B 100%);">


<canvas id="trendChart" width="500" height="300"></canvas>
</div>

JavaScript

new Chart(document.getElementById("trendChart"), {
      type: 'bar',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: 'rgb(124, 181, 236)'
        }]      
      },
      options:{
      	onClick: function(e){
        var element = this.getElementAtEvent(e);
        if(element.length > 0){
        		alert("Clicked on a bar with index: "+element[0]._index+". Now this bar should be marked as active.");
          }
        },
			   scales: {
          	yAxes: [{
            	ticks: {
              	fontColor:'#fff'
               }
            }],
						xAxes: [{
            	ticks: {
              	fontColor:'#fff'
              }
             }],                    
         },
       legend:{
          display:false
        }
      }
    })