Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by Ankit Kanojia

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
            {
                theme: "theme3",
                animationEnabled: true,
                axisX: {
                    interval: 1,
                    intervalType: "hour",
                },
                dataPointWidth: 20,
                data: [
                {
                    type: "column",
                    name: "Forecast",
                    legendText: "Forecast",
                    showInLegend: true,
                    dataPoints: [
                    { x: new Date(2017, 08, 2, 02, 00), y: 26 },
                    { x: new Date(2017, 08, 2, 03, 00), y: 38 },
                    { x: new Date(2017, 08, 2, 08, 00), y: 29 },
                    { x: new Date(2017, 08, 2, 09, 00), y: 41 }]
                },
                {
                    type: "column",
                    name: "Sales",
                    legendText: "Sales",
                    showInLegend: true,
                    dataPoints: [
                        { x: new Date(2017, 08, 2, 02, 00), y: 20 },
                        { x: new Date(2017, 08, 2, 03, 00), y: 30 },
                        { x: new Date(2017, 08, 2, 08, 00), y: 20 },
                        { x: new Date(2017, 08, 2, 09, 00), y: 30 }]
                },
                {
                    type: "line",
                    showInLegend: true,
                    legendText: "Sales per labour",
                    dataPoints: [
                        { x: new Date(2017, 08, 2, 02, 00), y: 20 },
                        { x: new Date(2017, 08, 2, 03, 00), y: 50 },
                        { x: new Date(2017, 08, 2, 04, 00), y: 10 },
                        { x: new Date(2017, 08, 2, 09, 00), y: 90 }]
                },
                {
                    type: "line",
                    showInLegend: true,
                    legendText: "Initial Notes",
                    dataPoints: [
                        { x: new Date(2017,...