[FIXED] Two PrimeNg charts in same row

Issue

I am using chartModel in my angular application.

I have two charts one is pie and the other is donought I want to decrease their size and have them on the same row how can that be done?

<div class="row">
  <div classs="col-md-6">
   <p-chart type="doughnut" [data]="data"></p-chart>
  </div>
  <div classs="col-md-6">
   <p-chart type="pie" [data]="data2"></p-chart>
  </div>
</div>

Solution

First you need to make sure that you’ve installed bootstrap. Another thing is that you write classs (it has one more s) change it to class.

Also if you want to have more responsive page in small size of page you need to use col-sm-6 too.

<div class="row">
    <div class="col-md-6 col-sm-6">
        <p-chart height="250" type="horizontalBar" [data]="data" [options]="options"></p-chart>
    </div>

    <div class="col-md-6 col-sm-6">
        <p-chart height="250" [responsive]="false" type="horizontalBar" [data]="data" [options]="options"></p-chart>
    </div>
</div>

I create a working sample of two chart in one row for you: StackBlitzLink

And the result:
enter image description here

Answered By – Alireza Ahmadi

Answer Checked By – Terry (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published