right side free space in line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

right side free space in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Chart Js Template</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
   </head> 
   <body> 
      <div style="height: 200px; width: 400px"> 
         <canvas id="canvas" height="350" width="500"></canvas> 
      </div> 
      <script type="text/javascript">
Chart.types.Line.extend({//from  ww  w  .j a v  a 2 s .c  o  m
    name: "LineAlt",
    initialize: function (data) {
        var labels = data.labels;
        data.labels = data.labels.map(function () { return '' });
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.datasets[0].points.forEach(function (point, i) {
            point.label = labels[i]
        })
    }
});
var max = 11;
var start = 0;
var step = 2;
var lineChartData = {
    labels: ["January", "February", "March", "April"],
    datasets: [
        {
            label: "Dataset",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [0, 3, 4, 11]
        }
    ]
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).LineAlt(lineChartData, {
    responsive: true,
    scaleOverride: true,
    scaleSteps: Math.ceil((max - start) / step),
    scaleStepWidth: step,
    pointDot: false,
});

      </script>  
   </body>
</html>

Related Tutorials