Column Chart with Labels instead of Date-Time as x-value - CanvasJS JavaScript Charts

Column Chart with Labels instead of Date-Time as x-value - CanvasJS JavaScript Charts

by canvasjs

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 properties = {
	legend:{
		'fontSize':13,
		'verticalAlign':'top',
		'horizontalAlign':'right'
	},
	dataPointMaxWidth:15,

	axisX:{
		gridThickness:0,
		labelFontSize:12,
		tickThickness:0,
		tickLength:18,
		/* interval:1, */
		labelAngle:0,
		/*intervalType:'day',*/
		stripLines:[],
		valueFormatString:'M/D',
		titleFontFamily:'MonteserratRegular',
		labelFontFamily:'MonteserratRegular',
		labelFontColor:'#282c37'
	},

	axisY:{
		titleFontSize:15,
		gridThickness:1,
		labelFontSize:12,
		tickThickness:0,
		tickLength:5,
		stripLines:[],
		title:'count',
		maximum:100,
		minimum:0,
		gridColor:'#CCC',
		titleFontFamily:'MonteserratRegular',
		labelFontFamily:'MonteserratRegular',
		labelFontColor:'#282c37'
	},

	title:{
		text:'UNIT COUNT',
		fontSize:17,
		fontFamily:'MonteserratSemiBold',
		fontWeight:'normal',
		margin:-5,
		padding:10,
		fontColor:'#282c37',
		horizontalAlign:'left'
	},
	animationEnabled:false,

	data:[{
		showInLegend:true,
		dataSourceId:'MachineMetrics.InputUnitCount',
		type:'column',
		color:'#3AC9D6',
		legendText:'Units',
		toolTipContent:'Units: {Units} {unit}<br>Time: {formatedTime}<br>',
		cursor:'pointer',
		dataPoints:[
			{label: '4/9',formatedTime:'4/9/2018 07:00 AM',currentLevel:'End',y:32,id:'5aa3768a24e5167d64390c55',useExtras:false,Units:32,unit:'count'},
			{label: '4/10',formatedTime:'4/10/2018 07:00 AM',currentLevel:'End',y:1,id:'5aa3768a24e5167d64390c55',useExtras:false,Units:1,unit:'count'},
			{label: '4/11',formatedTime:'4/12/2018 07:00 AM',currentLevel:'End',y:3,id:'5aa3768a24e5167d64390c55',useExtras:false,Units:3,unit:'count'}
		]	
	}],

	backgroundColor:'#FFFFFF'
};

var chart = new CanvasJS.Chart('chartContainer', properties);

chart.render();