JSFiddle - React, Tailwind, and code Playground

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>



<canvas id="targetChart" width="668"></canvas>

JavaScript

function createChart(context, type, bgColor, labels, datas){
      new Chart(context, {
          type: type,
          data: {
              labels: labels,
              datasets: [
                  {
                      label: "",
                      backgroundColor: bgColor,
                      data: datas
                  }
              ]
          },

          // Configuration options go here
          options: getOption(false)
      });
  }

  function commaify(value) {
      var result = (''+value).replace(/^(-?\d+)(\d{3})/, '$1,$2');
      return value == result? result : commaify(result);
  }

  function getOption(displayLegend){
      return {
          plugins: {
              datalabels: {
                  anchor: 'end',
                  align: 'end',
                  formatter: function(value){
                      return commaify(value);
                  }
              }
          },
          events: false,
          showTooltips: false,
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true,
                      min: 0,
                      userCallback: function(value, index, values){
                          value = value.toString();
                          value = value.split(/(?=(?:...)*$)/);
                          value = value.join(',');
                          return value;
                      }
                  }
              }]
          },
          legend: {
              display: displayLegend
          },
          animation: {
              duration: 0,
              onComplete: function(){
                  var ctx = this.chart.ctx;
                  ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                  ctx.textAlign = 'center';
                  ctx.textBaseLine = 'bottom';
                  ctx.fillStyle = '#0b7707';
              }
          },
        ...