CODEWITHSUNDEEP
csschartshighcharts
Jerome
Jerome

Reputation: 1192

How to reduce the general size of Highchart

I want to display 4 chart in container like on this schema: enter image description here

So I need to reduce the general size of the chart. I can't found anything to do something like chart.resize(totalsize/4) so it would reduce all the size.

Or maybe someone here as already displayed 4 charts like this but my goal is to display 3 containers each with 4 charts and responsive so if I reduce the window the containers goes one under one and the chart goes one under one too.

So for the moment my code is:

  <div class="tableChart">
            <div class="row">
              <div class="col-md-6 col-sm-12">{{> chart chart_id=this.idChartMem}}</div>
              <div class="col-md-6 col-sm-12">{{> chart chart_id=this.idChartCPU}}</div>
            </div>
            <div class="row">
              <div class="col-md-6 col-sm-12">{{> chart chart_id=this.idChartNet}}</div>
              <div class="col-md-6 col-sm-12">{{> chart chart_id=this.idChartDisk}}</div>
            </div>
          </div>

And the result is: enter image description here

That's why I need to reduce the general size of the charts

Upvotes: 0

Views: 719

Answers (1)

al27091
al27091

Reputation: 111

This should make a layout of two equal columns on a row and you can edit it adding more rows or more columns following bootstrap standard (https://getbootstrap.com/examples/grid/): 

<div class="container">
  <div class="row">
    <div class="col-md-6">
      Your content here
    </div>
    <div class="col-md-6">
      Your content here
    </div>
  </div>
</div>

So that you do not need a table to make a grid. And this can be made responsive adding style for smaller devices. For example: 

<div class="container">
    <div class="row">
      <div class="col-md-6 col-xs-12">
          Your content here
      </div>
      <div class="col-md-6 col-xs-12">
          Your content here
      </div>
    </div>
</div>

This will make the column to fit all the available space in a extra small device (col-xs-12). Then you have also the col-sm-.. class for small device. You have only to choose what fit your needs.

Upvotes: 1

Related Questions