Adding responsiveness to pivottable

Question

I have been using (http://nicolas.kruchten.com/pivottable) pivottable.js in one of my application. The table has been rendered fine but I am facing issues while adding responsiveness to my UI. The table don't shrink to the div sizes defined for small view port using media queries. Regardless of view-port the table always plots to the same size. Also the width of the columns of table seems to be non-changeable. I have tried to change the defined classes for col in pivot.css but that doesn't seem to do the trick.

table.pvtTable .pvtColLabel {text-align: center; width:50px;}
table.pvtTable .pvtTotalLabel {text-align: right; width: 50px;}

Also below is how I have used media queries on the div on "graph" class where the table is plotted:

@media (min-width: 320px) and (max-width: 640px) {

    /*Making gray box span across the screen*/
    body {
        padding-left: 0px; /*changed to avoid hz scroll on mobile device*/
        padding-right: 0px; /*changed to avoid hz scroll on mobile device*/
        padding-top: 0px;
    }
    #console {
        /* Negative indent footer by it's height */
    margin: 0px auto -40px;
}
.graph {
     width:250px;
     height:270px;
}
.wrapper-gray{
    background-color: #ebebeb;
    padding: 5px;
}


.section-box{
    background-color: #fff;
    padding: 5px;
}
}

Please guide me if I am going wrong somewhere.

Answer 1

The dimensions of Chart are fixed at creation time and controlled via renderOptions parameter of PivotUI. For example:

rendererOptions: {
   c3: {
      size: { height:200, width:200}
   }
}

Source: Issue 487