Update the width of a chart in chart.js - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Update the width of a chart in chart.js

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="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script> 
      <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  w  w  w . j  a  v  a 2s. c  o  m*/
var oldData;
function drawChart(barData) {
    oldData = barData;
    var ctx = document.getElementById("estimateChart").getContext("2d");
    ctx.canvas.width = getChartWidth(barData.length);
    var chartData = {
        labels: labels,
        datasets: [
            {
                highlightFill: "#888888",
                data: barData
            }
        ]
    };
    window.barFill = new Chart(ctx).Bar(chartData, {
        responsive: false,
        animationDuration: false,
    });
    barFill.update();
}
function updateChart(barData) {
    angular.forEach(oldData, function () {
        barFill.removeData();
    });
    oldData = barData;
    angular.forEach(barData, function (newBar, i) {
        barFill.addData([newBar], labels[i]);
    });
    barFill.scale.width = getWidth(barData);
    barFill.resize().update();
}
function getChartWidth(l) {
    return l * 50;
}
function getWidth(arr) {
    return getChartWidth(arr.length);
}
var labels = ["A", "B", "C", "D", "E", "F"];
drawChart([12, 23, 43, 43, 43, 22]);
var labels = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
setTimeout(function() {
    updateChart([43, 43, 43, 22, 112, 23, 12, 4, 23, 84]);
}, 1000)
    }

      </script> 
   </head> 
   <body> 
      <canvas id="estimateChart" height="200" width="300"></canvas>  
   </body>
</html>

Related Tutorials