ChartJS Line Chart

Multiple Line Chart

by beneverard

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

JavaScript

var options = {
  type: 'bar',
    data: {
        datasets: [{
            label: 'Bar Dataset',
            data: [10, 8, 16, 18]
        }, {
            label: 'Line Dataset',
            data: [10, 20, 30, null],

            // Changes this dataset to become a line
            type: 'line',
            fill: false,
            borderColor: "rgb(255, 0, 0)",
            lineTension: 0.5,
					pointRadius: 0
        }, {
            label: 'Line Dataset',
            data: [null, null, 30, 50],

            // Changes this dataset to become a line
            type: 'line',
            fill: false,
            borderColor: "rgb(0, 255, 0)",
            lineTension: 0.5,
            pointRadius: 0,
            borderDash: [10,5]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
 options: {
 
 scales: {
            xAxes: [{
                stacked: true
            }]
        }
        
 }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);