Stacked bar chart not extending the whole width of the canvas?

[cshickman]

Hello,

I am having difficulties with getting stacked bar charts to extend the entire width of the container div/canvas. It is leaving a lot of blank space after it is done rendering.

Here is an image of something close to what I am trying to achieve:

Direct link in case the image doesn’t work: http://i.imgur.com/USgSixt.png

Here is an image of what I am seeing with my actual chart:

Direct link in case the image doesn’t work… http://i.imgur.com/7ArjlXv.png

On the upper left, you can see what is rendered. On the upper right is what I see when I examine the container with the IE debugger to ensure it’s not the container itself that is somehow shrinking. The bottom part is the HTML that is actually rendered according to the debugger.

Here is the js code where I create the chart…

//Initializes the chart
    var chart = {
        interactivityEnabled: false,
        animationEnabled: true,
        creditText: false,
        toolTip: {
            enabled: false
        },
        axisX: {
            interval: 0,
            gridThickness: 0,
            tickLength: 0,
            tickThickness: 0,
            lineThickness: 0,
            labelFontSize: 0,
            tickLength: 0
        },
        axisY2: {
            interval: 0,
            gridThickness: 0,
            tickLength: 0,
            tickThickness: 0,
            lineThickness: 0,
            labelFontSize: 0,
            tickLength: 0,
            stripLines: [
      {
          value: 50,
          thickness: 1,
          color: "red",
          showOnTop: true,
          label: "Data error",
          labelPlacement: "outside",
         labelFontSize: 12,
          labelBackgroundColor: "transparent",
          tickLength: 0
      }]
        },
        dataPointWidth: 16,
        dataPointMinWidth: 16,
        dataPointMaxWidth: 16,
        data: [
    {
        type: "stackedBar",
        axisYType: "secondary",
        indexLabelFontSize: 25,
        dataPoints: [
        { y: 50, color: "#e6e6e6" },
      ]
    },
    {
        type: "stackedBar",
        axisYType: "secondary",
        dataPoints: [
        { y: 50, color: "#e6e6e6" },
      ]
    }
  ]
    };

And here is the code where I change some of the chart options and render it programmatically:

chart.axisY2.stripLines[0].value = stockpileStatusPlan;
                    chart.axisY2.stripLines[0].label = "Plan " + stockpileStatusPlan.toString() + "%";
                    chart.data[0].dataPoints[0].y = stockpileStatusActual;
                    chart.data[0].dataPoints[0].color = "#00a04a";
                    chart.data[1].dataPoints[0].y = 100 - stockpileStatusActual;
                    var finalChart = new CanvasJS.Chart(containers[0], chart);
                    finalChart.render();

Finally, here is the div container the chart is populating before it gets populated…

<div id="productionBarChart" style="width:100%;height:55px;display:block;"></div>

The bars represent a percentage of 100.

I’m sorry, but there are a LOT of moving parts in my project and it would be nearly impossible to boil it down to a jsfiddle.

Any ideas what could be going on?? Thank you!

[Vishwas R]

@cshickman,

This is happening as axis is taking space. You can overcome this by setting axis margin to negative value.

—
Vishwas R

[cshickman]

Thank you Vishwas. I just set the axisX and axisY2 margins to -1 but it didn’t solve the problem. Any ideas?

var chart = {
        interactivityEnabled: false,
        animationEnabled: true,
        creditText: false,
        toolTip: {
            enabled: false
        },
        axisX: {
            interval: 0,
            gridThickness: 0,
            tickLength: 0,
            tickThickness: 0,
            lineThickness: 0,
            labelFontSize: 0,
            tickLength: 0,
            margin: -1
        },
        axisY2: {
            interval: 0,
            gridThickness: 0,
            tickLength: 0,
            tickThickness: 0,
            lineThickness: 0,
            labelFontSize: 0,
            tickLength: 0,
            margin: -1,
            stripLines: [
      {
          value: 50,
          thickness: 1,
          color: "red",
          showOnTop: true,
          label: "Data error",
          labelPlacement: "outside",
          labelFontSize: 12,
          labelBackgroundColor: "transparent",
          tickLength: 0
      }]
        },
        dataPointWidth: 16,
        dataPointMinWidth: 16,
        dataPointMaxWidth: 16,
        data: [
    {
        type: "stackedBar",
        axisYType: "secondary",
        indexLabelFontSize: 25,
        dataPoints: [
        { y: 50, color: "#e6e6e6" },
      ]
    },
    {
        type: "stackedBar",
        axisYType: "secondary",
        dataPoints: [
        { y: 50, color: "#e6e6e6" },
      ]
    }
  ]
    };

[Vishwas R]

@cshickman,

By setting axisX.margin to -10, the margin towards left is getting reduced. Please check this jsfiddle.

If this doesn’t solve your requirement, kindly share the updated jsfiddle or pictorial representation for your requirement, so that we can look into it further and help you resolving.

—
Vishwas R

[cshickman]

Thanks Vishwas. I could never get the margins to work like I wanted to, but I was able to do a work-around by giving the chart itself a fixed width rather than the container.