How To Show Only First And Last Labels In CanvasJS

I need to show first and last labels only in CanvasJS. It's always showing all the labels but my requirement is to show only first and last. Is there any way out to do so?

Solution 1:

You can use axisY labelFormatter to do so.

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "Chart showing only First and Last Axis Labels",
	},
	axisY: {
		tickColor: "transparent",
		labelFormatter: function(e){
			if(e.chart.axisY[0].minimum === e.value || e.chart.axisY[0].maximum === e.value)
				return e.value;
			return "";
		}
	},
	data: [{
		type: "column",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}]
});

chart.render();

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

Solution 2:

You can also try hiding all axis-labels and add stripLines at the minimum and maximum.

var chart = new CanvasJS.Chart("chartContainer", {
title: {
	text: "Chart showing only First and Last Axis Labels",
},
axisX: {
	valueFormatString: "####"
},
axisY:[{
	tickColor: "transparent",
	labelFontColor: "transparent"
}],
axisY2:[{
	tickColor: "transparent",
	labelFontColor: "transparent"
}],
data: [
{
	type: "column",
	showInLegend: true,
	name: "Axis Y-1",
	xValueFormatString: "####",
	dataPoints: [
		{ x: 2006, y: 6 },
		{ x: 2007, y: 2 },
		{ x: 2008, y: 5 },
		{ x: 2009, y: 7 },
		{ x: 2010, y: 1 },
		{ x: 2011, y: 5 },
		{ x: 2012, y: 5 },
		{ x: 2013, y: 2 },
		{ x: 2014, y: 2 }
	]
},
{
	type: "column",
	showInLegend: true,                  
	axisYType: "secondary",
	//axisYIndex: 0, //Defaults to Zero
	name: "Axis Y2-1",
	xValueFormatString: "####",
	dataPoints: [
		{ x: 2006, y: 12 },
		{ x: 2007, y: 20 },
		{ x: 2008, y: 28 },
		{ x: 2009, y: 34 },
		{ x: 2010, y: 24 },
		{ x: 2011, y: 45 },
		{ x: 2012, y: 15 },
		{ x: 2013, y: 34 },
		{ x: 2014, y: 22 }
	]
}					
]
});

chart.render();
addStripLine(chart);

function addStripLine(chart){
for(var i = 0; i < chart.axisY.length; i++){
	min = chart.axisY[i].get("minimum");      
	max = chart.axisY[i].get("maximum");
	chart.axisY[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
	chart.axisY[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}
for(var i = 0; i < chart.axisY2.length; i++){
	min = chart.axisY2[i].get("minimum");
	max = chart.axisY2[i].get("maximum");
	chart.axisY2[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
	chart.axisY2[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}

}

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