Plotting a completely responsive zingchart and a visually appealing one(width-wise)

Question

Need to plot a zingchart that is completely responsive & visually accurate. To my knowledge, we need to provide the height and width in % (ex: 100% or 80%) for the div in which we are going to plot the zingchart. While writing the zingchart.render function we can omit the height and width property in that. The chart here is plotted with 100% width or the one that I am providing to the div.

The issue I face here: When a chart has a minimal amount of data and it is plotted on 100% width, it does not seem visually appealing(Looks gigantic). So Is there any way by which we can make the zingchart automatically plot the width based on the data that being fed.

Code Example(For above state scenraio):

HTML:

<div id='myChart'></div>

CSS:

    html, body, #myChart {
  height:100%;
  width:100%;
}

JS:

    var myConfig = {
  type: "bar",
  series: [
    {
      values:[20,40]
    },
    {
      values:[5,30]
    },
    {
      values:[30,20]
    }
  ]
};

zingchart.render({ 
    id : 'myChart', 
    data : myConfig, 

});

Hey, Chirag. Just a heads up. I've added the code along with my question. — user5210703, May 11 '17 at 10:43

score 0 · Answer 1 · answered May 11 '17 at 15:42

What you can do is adjust the barWidth of the chart based on screensize. You can do this by defining mediaRules, which our library are the same as CSS media queries. At a very large screen render barWidth:55 at a fixed width that looks good. Then at a smaller screen size switch to barWidth:'100%'.

var myConfig = {
  type: 'bar',
  plot: {
    barWidth: 55,
    mediaRules: [
      {
        maxWidth: 1111,
        barWidth: '100%'
      }  
    ]
  },
 series: [
  {
   values: [35,42,67,89,25,34,67,85]
  },
  {
   values: [35,42,67,89,25,34,67,85]
  }
 ]
};

zingchart.render({ 
 id: 'myChart', 
 data: myConfig, 
 height: '100%', 
 width: '100%' 
});

html, body {
 height:100%;
 width:100%;
 margin:0;
 padding:0;
}
#myChart {
 height:100%;
 width:100%;
 min-height:150px;
}
.zc-ref {
 display:none;
}

<!DOCTYPE html>
<html>
 <head>
 <!--Assets will be injected here on compile. Use the assets button above-->
  <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
 </head>
 <body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
 </body>
</html>

link to full screen codepen demo here

Resources used:

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/ https://www.zingchart.com/docs/tutorials/chart-elements/media-rules/

Plotting a completely responsive zingchart and a visually appealing one(width-wise)

1 Answers1