JSFiddle - React, Tailwind, and code Playground

by Donlee Malacad

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chart"></canvas>

JavaScript

var DATA_COUNT = 7
 var labels = [
   'Monday',
   'Tuesday',
   'Wednesday',
   'Thursday',
   'Friday',
   'Saturday',
   'Sunday'
 ]

 Chart.helpers.merge(Chart.defaults.global, {
   aspectRatio: 4 / 3,
   tooltips: false,
   layout: {
     padding: {
       top: 32
     }
   },
   elements: {
     line: {
       borderWidth: 2,
       fill: false
     }
   },
   plugins: {
     legend: false,
     title: false
   }
 });
 var chart = new Chart('chart', {
   type: 'line',
   data: {
     labels: labels,
     datasets: [{
       backgroundColor: 'gray',
       borderColor: 'gray',
       data: [10, 5, 15, 2, 21, 5, 10]
     }]
   },
   options: {
     animation: {
       duration: 2000,
       onProgress: function(animation) {
         progress.value = animation.currentStep / animation.numSteps;
       },
       onComplete: function() {
         window.setTimeout(function() {
           progress.value = 0;
         }, 2000);
       }
     },
     plugins: {
       datalabels: {
         anchor: 'top',
         align: 'top',
         color: function(ctx) {
           const value = ctx.dataset.data[ctx.dataIndex]
           return value > 15 ? 'red' :
             value > 10 ? 'orange' :
             value > 5 ? 'blue' :
             'green'
         },
         font: {
           size: 24
         },
         formatter: function(value) {
           return '\u27a3'
         },
         rotation: function(ctx) {
           return ctx.dataset.data[ctx.dataIndex] * 25;
         },
         padding: 0
       }
     },
     scales: {
       xAxes: [{
         offset: true
       }],
       yAxes: [{
         ticks: {
           beginAtZero: true,
           max: 30
         }
       }]
     }
   }
 });