Home forums Using CanvasJS Stacked bar chart not extending the whole width of the canvas?

This topic contains 4 replies, has 2 voices, and was last updated by  cshickman 6 months, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #14136

    cshickman
    Member

    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:

    bar chart

    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:

    Screenshot

    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!

    #14146

    Vishwas R
    Keymaster

    @cshickman,

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


    Vishwas R

    #14152

    cshickman
    Member

    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" },
          ]
        }
      ]
        };
    #14164

    Vishwas R
    Keymaster

    @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

    #14179

    cshickman
    Member

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.