Responsive Dashboard Layout For xs/sm/md/lg/xl screen size

[Ketan Patel]

Hi Team I want to create layout of multiple charts as a card. I want to define colums counts based on screen size.

Example: For Large screen, I want to show 3 card in a row. For medium screen size, 2 card and for small, 1 card.

I don't want to give fix columns counts. Also, based on screen size it should auto adjust cards position in the available cell (data-row/data-col) the way bootstrap grid system works. Is it possible to achieve?

Please refer to below code sample as reference.

Here oe-card and oe-accumulationchart is wrapper component created using sync fusion card and chart component.

<div class="row gy-4">

    <!-- <ejs-dashboardlayout [columns]="2"> -->

      <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 e-panel">

        <oe-card title="Gauge" [border]="true">

          <oe-gauge-chart [value]="65" [config]="gaugeConfig" [ranges]="gaugeRanges">

          </oe-gauge-chart>

        </oe-card>

      </div>

      <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 e-panel">

        <oe-card title="Donut" [border]="true">

          <oe-accumulation-chart [oechart]="donutData" [oeChartViewConfig]="oeChartViewConfig"></oe-accumulation-chart>

        </oe-card>

      </div>

      <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 e-panel">

      <oe-card title="Pie" [border]="true">

        <oe-accumulation-chart [oechart]="pieData" [oeChartViewConfig]="oeChartViewConfig"></oe-accumulation-chart>

      </oe-card>

    </div>

    <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 e-panel">

      <oe-card title="Pie1" [border]="true">

        <oe-accumulation-chart [oechart]="pieData1" [oeChartViewConfig]="oeChartViewConfig"></oe-accumulation-chart>

      </oe-card>

    </div>

    <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 e-panel">

      <oe-card title="Pie2" [border]="true">

        <oe-accumulation-chart [oechart]="pieData2" [oeChartViewConfig]="oeChartViewConfig"></oe-accumulation-chart>

      </oe-card>

    </div>

    <!-- </ejs-dashboardlayout> -->

  </div>

[LeoLavanya Dhanaraj]

Hi Ketan,

Greetings from Syncfusion support.

Based on your shared details, we have validated your reported query in the Angular Dashboard Layout component. Basically, the Dashboard Layout is designed to automatically adapt to lower resolutions by transforming the entire layout into a stacked one, so that the panels will be displayed in a vertical column. By default, whenever the screen resolution meets 600px or lower resolution, this layout transformation occurs. This is the component's default behavior.

We would like to mention that you can enable the mediaQuery property to turn the layout into a stacked one based on your defined resolution. Based on the screen resolution, you can render the number of panels in a row as you want. Whenever the window size reaches the defined resolution or less, the layout becomes a stacked layout. For more information, check the below documentation link.

Sample : https://stackblitz.com/edit/angular-mxvtje?file=app.component.html

Please check the sample and video footage and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

Attachment: DashboardLayoutVideo_bf464ba5.zip