Vertical Grid Line Issue with Chart.js - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

Vertical Grid Line Issue with 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="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*  w w w . j av a  2 s .com*/
Chart.defaults.global.elements.point.radius = 2;
var ctx = document.getElementById("graph-1-met");
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [0,,,,,1,,,,,,2,,,,,,3,,,,,,4,,,,,,5,,,,,,6,,,,,,7,,,,,,8,,,,,,9,,,,,,10,,,,,,11,,,,,,12,,,,,,13,,,,,,14,,,,,,15,,,,,],
        datasets: [
            {
                data: [65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55],
                backgroundColor: "rgba(0,204,255,0.2)",
                borderColor: "rgba(0,204,255,1)",
                borderWidth: 2,
            }
        ]
    },
    options: {
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Blowing Time (min)'
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Undissolved Lime (tonnes)'
                }
            }]
        }
    }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="graph-1-met"></canvas>  
   </body>
</html>

Related Tutorials