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?