Search code examples
javascriptchartscanvasjs

canvasjs x-axis label shows y-axis index in combined chart

I am using Canvasjs combined chart type for showing 2 y-axis value against single x-axis value(time). But as you can see in the image, x-axis label showing y-axis's index label in particular case.

enter image description here

If you see, instead of 10:00 AM it is showing "Gold Coast" in the chart.

I tried setting the interval for x-axis like below but nothing worked for me. 

axisX: {
    //interval: 1,
    intervalType: "hour",
    //valueFormatString: "DD MMM YYYY HH:mm:ss"
},

What could be the issue and and any idead how to resolve that? 

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var location_datapoints = [
	{ x: new Date(2018, 10, 18, 10, 0), y: 4, indexLabel: "Gold Coast", indexLabelOrientation: "vertical", label: "Gold Coast" },
	{ x: new Date(2018, 10, 18, 11, 0), y: 4, indexLabel: "Mount Tambrine", indexLabelOrientation: "vertical", label: "Gold Coast" }
];
var workrest_datapoints = [
	{ x: new Date(2018, 10, 18, 10, 0), y: 2, label: "Work" },
	{ x: new Date(2018, 10, 18, 11, 0), y: 1, label: "Rest" }
];
			//console.log(location_datapoints);
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	title:{
		text: "Driver Work Rest Data"
	},
	axisY:{ 
		title: "Work or Rest",
		includeZero: false,
		interval: 1,
		labelFormatter: function ( e ) {
			var ret;
			switch(e.value){
				case 1:
					ret = "Rest";
					break;
				case 2:
					ret = "Work";
					break;
				case 3:
					ret = "2-up";
					break;
				case 4:
					ret = "Location";
					break;
				case 5:
					ret = "Comments";
					break;
				case 6:
					ret = "Annotations"
					break;
				default:
					ret = '';
			}
            return ret;  
        }
	},
	axisX: {
			//interval: 1,
			intervalType: "hour",
			//valueFormatString: "DD MMM YYYY HH:mm:ss"
			},
	data: [
	
		{
			type: "bubble",
			//toolTipContent: "{label}",
			dataPoints: location_datapoints
		},
		
	]
});

chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Solution

  • Siddiq,

    It's not the indexLabel being shown over axisX but the label that's set in dataPoint. Removing label should work fine in this case.

    var location_datapoints = [
	{ x: new Date(2018, 10, 18, 10, 0), y: 4, indexLabel: "Gold Coast", indexLabelOrientation: "vertical" },
	{ x: new Date(2018, 10, 18, 11, 0), y: 4, indexLabel: "Mount Tambrine", indexLabelOrientation: "vertical" }
];
var workrest_datapoints = [
	{ x: new Date(2018, 10, 18, 10, 0), y: 2, label: "Work" },
	{ x: new Date(2018, 10, 18, 11, 0), y: 1, label: "Rest" }
];
			//console.log(location_datapoints);
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	title:{
		text: "Driver Work Rest Data"
	},
	axisY:{ 
		title: "Work or Rest",
		includeZero: false,
		interval: 1,
		labelFormatter: function ( e ) {
			var ret;
			switch(e.value){
				case 1:
					ret = "Rest";
					break;
				case 2:
					ret = "Work";
					break;
				case 3:
					ret = "2-up";
					break;
				case 4:
					ret = "Location";
					break;
				case 5:
					ret = "Comments";
					break;
				case 6:
					ret = "Annotations"
					break;
				default:
					ret = '';
			}
            return ret;  
        }
	},
	axisX: {
			//interval: 1,
			intervalType: "hour",
			//valueFormatString: "DD MMM YYYY HH:mm:ss"
			},
	data: [
	
		{
			type: "bubble",
			//toolTipContent: "{label}",
			dataPoints: location_datapoints
		},
		
	]
});

chart.render();
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

    `