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 = newCanvasJS.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();

<scriptsrc="https://canvasjs.com/assets/script/canvasjs.min.js"></script><divid="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 = newCanvasJS.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 Zeroname: "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);

functionaddStripLine(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"});
}

}

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