Bar chart with fixed height scrollable-X - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Bar Chart

Description

Bar chart with fixed height scrollable-X

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
      <script type="text/javascript" src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.min.js"></script> 
      <style id="compiled-css" type="text/css">

.chartWrapper {/*from  w w  w  .  jav  a2 s  . c  o m*/
   position: relative;
}
.chartWrapper > canvas {
   position: absolute;
   left: 0;
   top: 0;
   pointer-events: none;
}
.chartAreaWrapper {
   width: 600px;
   overflow-x: scroll;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
function generateLabels() {
  var chartLabels = [];
  for (x = 0; x < 100; x++) {
    chartLabels.push("Label" + x);
  }
  return chartLabels;
}
function generateData() {
  var chartData = [];
  for (x = 0; x < 100; x++) {
    chartData.push(Math.floor((Math.random() * 100) + 1));
  }
  return chartData;
}
function addData(numData, chart){
      for (var i = 0; i < numData; i++){
          chart.data.datasets[0].data.push(Math.random() * 100);
          chart.data.labels.push("Label" + i);
          var newwidth = $('.chartAreaWrapper2').width() +60;
          $('.chartAreaWrapper2').width(newwidth);
    }
}
var chartData = {
  labels: generateLabels(),
  datasets: [{
    label: "Test Data Set",
    data: generateData()
  }]
};
$(function() {
  var canvasFuelSpend = $('#chart-FuelSpend');
  var chartFuelSpend = new Chart(canvasFuelSpend, {
    type: 'bar',
    data: chartData,
    maintainAspectRatio: false,
    responsive: true,
    options: {
      tooltips: {
        titleFontSize: 0,
        titleMarginBottom: 0,
        bodyFontSize: 12
      },
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          ticks: {
            fontSize: 12,
            display: false
          }
        }],
        yAxes: [{
          ticks: {
            fontSize: 12,
            beginAtZero: true
          }
        }]
      },
      animation: {
        onComplete: function() {
          var sourceCanvas = chartFuelSpend.chart.canvas;
          var copyWidth = chartFuelSpend.scales['y-axis-0'].width - 10;
          var copyHeight = chartFuelSpend.scales['y-axis-0'].height + chartFuelSpend.scales['y-axis-0'].top + 10;
          var targetCtx = document.getElementById("axis-FuelSpend").getContext("2d");
          targetCtx.canvas.width = copyWidth;
          targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);
        }
      }
    }
  });
  addData(5, chartFuelSpend);
});
    }

      </script> 
   </head> 
   <body> 
      <div class="chartWrapper"> 
         <div class="chartAreaWrapper"> 
            <div class="chartAreaWrapper2"> 
               <canvas id="chart-FuelSpend" height="300" width="1200"></canvas> 
            </div> 
         </div> 
         <canvas id="axis-FuelSpend" height="300" width="0"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials