Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by flashback_ua

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("barChartContainer",
                    {
                        title:{
                        text: "Average Results Bar Chart",
                        fontFamily: "tahoma",
                        fontSize: 32,
                        fontColor: "DarkSlateGray"
                    },

                    legend :{
                      verticalAlign: "top",
                      fontSize: 23,
                      fontColor: "DarkGray"
                    },
                    
                    axisX:{
                    title: "Tests & Metrics",
                    titleFontFamily: "verdana",
                    titleFontSize: 24,
                    titleFontColor: "DarkCyan",
                    labelFontSize: 18,
                    interval: 1
                    },

                    axisY:{
                    title: "Metrics Values",
                    titleFontFamily: "verdana",
                    titleFontSize: 24,
                    titleFontColor: "DarkCyan",
                    labelFontSize: 18,
                    //interval: 100
                    },
                    
                    data: [
                      {        
                    name: "Baseline Run",
                            showInLegend: true,
                            visible: true,        
                            dataPoints: [
{ x: 11, y: 1 },
{ x: 12, y: 1.2 },
{ x: 13, y: 7.476 },
{ x: 14, y: 8.583 },
]
            },

            {
                name: "Current Run",
                showInLegend: true,        
                dataPoints: [
                
{ x: 11, y: 24.951 },
{ x: 12, y: 124.039 },
{ x: 13, y: 69587 },
{ x: 14, y: 6.918 },
 ]
                    }
                  ]
                });
                
                chart.render();