Labels on x-axis of only displaying seven of fourteen - Infragistics igniteUI jquery chart control

Question

I developed a column chart with the igDataChart jquery control. All of the data in the graph renders correctly, but the labels below it will only show up to ten. If I increase the number to eleven, then the labels show every other one. The total number in my example should show 14 labels, but only seven display and every other label is visible. (Ex, 1, 3,5,7, etc.), however; the graphs above shows all of the columns (two series - 28 total columns). The spaces below where the label for the columns should display are blank.

An example is available on this link to my code.

$(function () {
var data = [
{"Entity":"THA","Complete":59,"Ineligible":2,},{"Entity":"THAL","Complete":66,"Ineligible":15,},{"Entity":"THAM","Complete":92,"Ineligible":22,},{"Entity":"THAZ","Complete":100,"Ineligible":3,},{"Entity":"THC","Complete":94,"Ineligible":5,},{"Entity":"THD","Complete":97,"Ineligible":15,},{"Entity":"THDN","Complete":76,"Ineligible":5,},{"Entity":"THFW","Complete":82,"Ineligible":24,},{"Entity":"THHEB","Complete":77,"Ineligible":3,},{"Entity":"THK","Complete":100,"Ineligible":38,},{"Entity":"THP","Complete":94,"Ineligible":14,},{"Entity":"THS","Complete":100,"Ineligible":5,},{"Entity":"THSW","Complete":72,"Ineligible":21,},{"Entity":"TOTAL","Complete":86,"Ineligible":15,},
 ];
$(function () {
$("#chart").igDataChart({
dataSource: data,
height: "355px",
width: "100%",
title: "Completion Summary",
subtitle: "",
axes: [{
name: "Entity",
type: "categoryX",
label: "Entity",
labelAngle: -45,
gap: 0.3,
}, {
name: "Percent",
type: "numericY",
title: "Percent"
}],
series: [{
// showTooltip: true enables the default tooltips
showTooltip: true,
// if a custom tooltipTemplate is set,
// the default tooltip will not be shown
showTooltip: true,
name: "Complete",
title: "Complete",
type: "column",
valueMemberPath: "Complete",
xAxis: "Entity",
yAxis: "Percent",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
thickness: .05
}, {
showTooltip: true,
name: "Ineligible",
title: "Ineligible",
type: "column",
valueMemberPath: "Ineligible",
xAxis: "Entity",
yAxis: "Percent",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
thickness: .05
}],
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate"
});
});
});

I tested in chrome, Firefox and IE 8-11

I looked for a property I could assign to the java script that would provide more room or set the total number of labels allowed, but there doesn't seem to be anything like this available. Any suggestions or work around in existence?

Answer 1

The x axis defaults to displaying labels on an automatically calculated interval and will throttle down the number of labels displayed as they would start to collide. In your case, you are using some rotation in order to be able to display more labels with higher density, so you should instruct the axis to use an interval of 1, rather than the automatic interval. To do this you should set

interval: 1

On the axis. I've updated your sample to show you what I mean: http://jsfiddle.net/F8YWY/2/