Basic Column Chart - CanvasJS

Basic Column Chart

by canvasjs

HTML

<script src="http://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

CanvasJS.addCultureInfo(
			"es",
            {
                decimalSeparator: ",",
                digitGroupSeparator: ".",
                days: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
                shortMonths: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
                months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
            });

var chart = new CanvasJS.Chart("chartContainer",
	{
			culture: "es",
			title:{
				text: "Ejemplo",
				fontSize: 24,
				color: "#F08080",
			},
            animationEnabled: true,
			axisX:{
				gridColor: "Silver",
				tickColor: "silver",
				labelAngle: -30,
		    valueFormatString:"MMM-YY"
			},                        
			toolTip:{
                shared:true
            },
			theme: "theme2",
			axisY: {
				gridColor: "Silver",
				tickColor: "silver"
			},
			legend:{
				verticalAlign: "center",
				horizontalAlign: "right"
			},
			data: [
			  {        
				name: "TAM",
				type: "line",
				showInLegend: true,
				lineThickness: 2,
				markerType: "square",
				color: "#F08080",
				dataPoints: [
				{ x: new Date(2016, 3), y: 7085.98 },
				{ x: new Date(2016, 2), y: 2925.20 },
				{ x: new Date(2016, 1), y: 1147.12 },
				{ x: new Date(2016, 0), y: 7235.80 },
				{ x: new Date(2015, 11), y: 9216.87 },
				{ x: new Date(2015, 10), y: 23614.73 },
				{ x: new Date(2015, 9), y: 10625.82 },
				{ x: new Date(2015, 8), y: 6152.74 },
				{ x: new Date(2015, 7), y: 12030.90 },
				{ x: new Date(2015, 6), y: 22358.29 },
				{ x: new Date(2015, 5), y: 7591.98 },
				{ x: new Date(2015, 4), y: 10502.31 }
				]
			  },
			  {        
				name: "TAM LY",
				type: "line",
				showInLegend: true,
				lineThickness: 2,
				markerType: "circle",
				color: "#20B2AA",
				dataPoints: [
				{ x: new Date(2016, 3), y: 9643.50 },
				{ x: new Date(2016, 2), y:...