No width for the bar in horizontal bar chart:
In the above chart the first bar is not displaying the values. Though the value of it is more than 60% the width of the bar never grows. Thanks in advance.
Below is the code i am using.
$('#prodSumChartContainer .chartArea').empty();
$('#prodSumChartContainer #prodSumChartTemplate').clone(true, true).attr('id', 'prodSumChart').removeAttr('hidden').appendTo('#prodSumChartContainer .chartArea');
var prodSumData = {
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [prodSummActual],
title: "Actual"
},
{
fillColor: "rgba(151,187,205, 0.5)",
strokeColor: "rgba(151,187,205,1)",
data: [prodSummExpected],
title: "Expected"
},
{
fillColor: "rgba(0, 20, 137,1)",
strokeColor: "rgba(0, 20, 137,0.5)",
data: [prodSummTarget],
title: "Target"
}
]
}
var prodSumOpt = {
animationSteps: 30,
inGraphDataShow: true,
annotateDisplay: true,
maxBarWidth: 30,
fullWidthGraph: true,
legend: false,
inGraphDataShow: true,
scaleShowGridLines: false,
xAxisBottom: false,
xAxisTop: false,
yAxisLeft: false,
yAxisRight: false,
scaleLineColor: "rgba(0,0,0,0)",
animationEasing: "linear",
barDatasetSpacing: 15,
barBorderRadius: 5,
annotateLabel: "<%=v1 +' - '+ v3%> MT",
inGraphDataTmpl: "<%=(100 * v3 / prodSummTarget).toFixed(2) %> %",
inGraphDataFontFamily: "'Arial Rounded MT'",
inGraphDataFontSize: 11,
inGraphDataFontColor: "#8d8888",
responsive: false,
}
prodSummaryGauge = new Chart(document.getElementById("prodSumChart").getContext("2d")).HorizontalBar(prodSumData, prodSumOpt);