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?

回答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>

回答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>

来源：https://stackoverflow.com/questions/48699685/how-to-show-only-first-and-last-labels-in-canvasjs

标签

javascript

canvasjs