Zingchart chart not filling parent div's width

Question

So I am initializing a zingChart with the following code.

barChartData = 
        "type":"bar"
        "series":[
            "values":[11,16,7,-14,11,24,-42,26,]
        ]


    $("#performance-bar-chart").zingchart(
        data: barChartData
    )

The barchart is rendered correctly but the width doesn't seem to much the parent div. I've checked if anything is setting the height and width but nothing is.

When I zoom in or out on the page (ctrl + mouse scroll) the chart automatically expands to fill the parent div!

Thank you,

http://jsfiddle.net/f29jn25b/15/ When you shrink the height of the result section or zoom the page, the chart will suddenly autoscale to fill the width — SegFaultDev, Jul 24 '15 at 20:47
Does this solve your problem? http://jsfiddle.net/eugensunic/f29jn25b/16/, if yes then I ll put it as an answer. — EugenSunic, Jul 24 '15 at 21:08
It does... I had tried this using a class instead of id to style this. hmm, it works now tho! thank you very much. — SegFaultDev, Jul 24 '15 at 21:16

EugenSunic · Accepted Answer · 2015-07-24T21:22:44.437

7

To resolve your problem (sudden change of width) you should style your div using

CSS:

#myChart {
    width:100%;
    height:300px;
}

and here is your JS and HTML in case the fiddle is gone.

HTML:

 <div id="myChart"></div>

JS:

 // Data for the chart
var barChartData = {
    type: "bar",
    series: [{  values: [3,7,10,2,6,5]} ]
};

// Make your chart
$("#myChart").zingchart({
    data: barChartData
});

edited Jul 24 '15 at 21:22

answered Jul 24 '15 at 21:12

EugenSunic

13,162
13
64
86

Zingchart chart not filling parent div's width

1 Answers1