ChartJS Line Chart

Multiple Line Chart

by Kai_Draord

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
 <div class="row">
   <div class="col-md-12">
     <graph id="myChart"></graph> // This is the canvas component in a vue.js file
   </div>
</div>

CSS

canvas { background-color : #eee;
}

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',
    responsive: true,
    maintainAspectRatio: false,
    // The data for our dataset
    data: {
        labels: ['00:00:00', '00:00:01', '00:00:02', '00:00:03', '00:00:04'],
        datasets: [{
            label: "Chart 1",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, -1, 1, .8],
        }]
    },
    // Configuration options go here
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    min: -1,
                    max: 1,
                }
            }]
        }
    },
});
ctx.canvas.style.height = window.innerHeight * 0.5;