0

No width for the bar in horizontal bar chart: 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);

0 Answers0