Multi Line line chart with chart JS library

This article contains how to draw a multi line graph with chart JS library. It contains a static data set. You can assign dynamic values and colors using php or any other appropriate language

Click to view Reference
Click to view official website

&lt!DOCTYPE html&gt
&lthtml&gt
&lthead&gt
 &ltstyle&gt
  .container { width: 80%; margin: 20px auto; }
  .p { text-align: center; font-size: 1px; padding-top: 140px; }
 &lt/style&gt
&lt/head&gt
&ltbody&gt

&ltdiv class="container"&gt
  &ltdiv&gt
    &ltcanvas id="canvas"&gt&lt/canvas&gt
  &lt/div&gt
&lt/div&gt

&ltscript src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"&gt&lt/script&gt
&ltscript&gt
var lineChartData = {
    labels: ["Data 1", "Data 2", "Data 3", "Data 4", "Data 5", "Data 6","Data"],
    datasets: [{
        fillColor: "rgba(220,220,220,0)",
        strokeColor: "rgba(220,180,0,1)",
        pointColor: "rgba(220,180,0,1)",
        data: [10, 30, 80, 20, 40, 10, 60]
    }, {
        fillColor: "rgba(151,187,205,0)", 
      strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        data: [20, 10, 40, 30, 80, 30, 20]
    }]

}

Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,160,0,0.8)";
//Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;/**/

var ctx = document.getElementById("canvas").getContext("2d");
var LineChartDemo = new Chart(ctx).Line(lineChartData, {
    pointDotRadius: 1,
    bezierCurve: false,
    scaleShowVerticalLines: false,
    scaleGridLineColor: "black"
});
&lt/script&gt

&lt/body&gt
&lt/html&gt