Live Demo - Line Chart Example Using Canvasjs

See Free Live Demo example of We are giving you line chart demo usign html,css and canvas jquery. This is the best plugin for line chart. this canvasjs plugin also provide animation when chart display. this canvasjs can't take time in loading. canvasjs is most popular plugin for line chart. We allows to free snippets of javas...

<!doctype html>
<html lang="en">
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
    </head>
    <style type="text/css">
        .chart{
            height: 400px;
            width: 80%;
            margin: 0 auto;
            margin-top: 100px;
        }
    </style>
    <body>
        <div id="lineChartContainer" class="chart"></div>
        <script type="text/javascript">
            window.onload = function () {
                var lineChartOptions = {
                    animationEnabled: true,
                    theme: "light2",
                    title:{
                        text: "Real vs Projected Sales"
                    },
                    axisX:{
                        valueFormatString: "DD MMM"
                    },
                    axisY: {
                        title: "Number of Sales",
                        suffix: "K",
                        minimum: 30
                    },
                    toolTip:{
                        shared:true
                    },  
                    legend:{
                        cursor:"pointer",
                        verticalAlign: "bottom",
                        horizontalAlign: "left",
                        dockInsidePlotArea: true,
                        itemclick: toogleDataSeries
                    },
                    data: [{
                        type: "line",
                        showInLegend: true,
                        name: "Projected Sales",
                        markerType: "square",
                        xValueFormatString: "DD MMM, YYYY",
                        color: "#F08080",
                        yValueFormatString: "#,##0K",
                        dataPoints: [
                            { x: new Date(2018, 2, 1), y: 63 },
                            { x: new Date(2018, 2, 2), y: 69 },
                            { x: new Date(2018, 2, 3), y: 65 },
                            { x: new Date(2018, 2, 4), y: 70 },
                            { x: new Date(2018, 2, 5), y: 71 },
                            { x: new Date(2018, 2, 6), y: 65 },
                            { x: new Date(2018, 2, 7), y: 73 },
                            { x: new Date(2018, 2, 8), y: 96 },
                            { x: new Date(2018, 2, 9), y: 84 },
                            { x: new Date(2018, 2, 10), y: 85 },
                            { x: new Date(2018, 2, 11), y: 86 },
                            { x: new Date(2018, 2, 12), y: 94 },
                            { x: new Date(2018, 2, 13), y: 97 },
                            { x: new Date(2018, 2, 14), y: 86 },
                            { x: new Date(2018, 2, 15), y: 89 }
                        ]
                    },
                    {
                        type: "line",
                        showInLegend: true,
                        name: "Real Sales",
                        lineDashType: "dash",
                        yValueFormatString: "#,##0K",
                        dataPoints: [
                            { x: new Date(2018, 2, 1), y: 60 },
                            { x: new Date(2018, 2, 2), y: 57 },
                            { x: new Date(2018, 2, 3), y: 51 },
                            { x: new Date(2018, 2, 4), y: 56 },
                            { x: new Date(2018, 2, 5), y: 54 },
                            { x: new Date(2018, 2, 6), y: 55 },
                            { x: new Date(2018, 2, 7), y: 54 },
                            { x: new Date(2018, 2, 8), y: 69 },
                            { x: new Date(2018, 2, 9), y: 65 },
                            { x: new Date(2018, 2, 10), y: 66 },
                            { x: new Date(2018, 2, 11), y: 63 },
                            { x: new Date(2018, 2, 12), y: 67 },
                            { x: new Date(2018, 2, 13), y: 66 },
                            { x: new Date(2018, 2, 14), y: 56 },
                            { x: new Date(2018, 2, 15), y: 64 }
                        ]
                    }]
                };

$("#lineChartContainer").CanvasJSChart(lineChartOptions);