bar chart with ChartJS

by Carlos Cariello

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://www.chartjs.org/dist/2.7.0/Chart.bundle.js"></script>
<script src="http://www.chartjs.org/samples/latest/utils.js"></script>
<body style="height: 100%; width: 100%; overflow: hidden; margin: 0;">
<div id="canvas-wrapper" style="height: 100%; width: 100%; overflow-x: scroll; overflow-y: hidden;">
<div id="canvas-holder" style="height: 100%; width: 500px;" oncontextmenu="return false;">
<canvas id="myChart"></canvas>
</div>
</div>
</body>

CSS

html {
  overflow: hidden;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  }

JavaScript

var ctx = document.getElementById("myChart").getContext("2d");

        var chart = {
        options: {
        scales: {
         yAxes: [{ id: 'myAxis', position: 'left', type: 'linear', display: true, ticks: { display: true, min: 0, beginAtZero: true, max: 120 }, scaleLabel: { display: true, labelString: "Testing" } }] },
          responsive: true,
          maintainAspectRatio: false,
          animation: {
                    
                    onComplete: function(animation) {
                    }
                }
      },
        type: 'bar',
        data: {
            labels: [30, 40, 50, 60, 70, 80, 90],
            datasets: [
                {
                    label: "Quantidade de clientes",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [7895, 6026, 3003, 5717, 4945, 3072]
                }
            ]
        }};

   var myLiveChart = new Chart(ctx, chart);

var myIntv = setInterval(function(){
myLiveChart.scales['myAxis'].options.ticks.fontSize = 36;
myLiveChart.scales['myAxis'].options.ticks.max = 8000;
myLiveChart.scales['myAxis'].options.scaleLabel.labelString = 'Dias de Atraso do Cliente';
myLiveChart.scales['myAxis'].options.scaleLabel.fontSize = 18;
myLiveChart.update();
clearInterval(myIntv);}, 1);