Want to learn more? Take the full course at [ Ссылка ] at your own pace. More than a video, you'll learn hands-on coding & quickly apply skills to your daily work.

---

You've created some dashboards with the default layouts. Now we'll talk about some of the ways you can alter the layout to suit your needs.

The multiple columns you have in your dashboard need not be equal widths. You can set the width of each column using the attribute data-width equals. All the columns on your dashboard page need to have widths that add up to 1000.

But what if you want to arrange your dashboard in rows instead of columns? You can do this, but you have to choose one or the other (though we’ll see later that you can set this differently for each page in a multi-page dashboard). To change the layout mode from columns to rows, we make a change in the header to include the option orientation: rows.

Once the orientation option is rows, charts work the same way in the layout as with columns. Now multiple charts grouped under one row are laid out horizontally instead of vertically. If you want to change the height of the rows, just use data-height instead of data-width.

When you layout your dashboard, if the charts do not easily fit in one screen of vertical space, you can make the dashboard page scrollable. This requires the header option vertical_layout: scroll. Now the user can scroll down to see the rest of your dashboard. However, this is generally not a good dashboard design. In the next lesson, we’ll learn other options for handling more dashboard content than can naturally fit in a single page view.

Now let's try some examples.

свернуть