VueUiDashboard - PDF export from `generatePdf` does not fit chart size (too much white space)

[thawat6]

---

Title:
PDF export from generatePdf does not fit chart size (too much white space)

---

Description:
When exporting a dashboard to PDF using generatePdf, the chart does not fit the available page space.

The chart is rendered very small, leaving a lot of unused white space around it.

---

Steps to reproduce:

1. Create a dashboard with VueUiDashboard and add one chart.
2. Export the dashboard using generatePdf().
3. Open the PDF.

---

Current behavior:

• Chart appears too small.
• Page space is not properly fitted to the chart.

---

Expected behavior:

• The chart should scale to fit the page size.
• If the chart/dashboard is taller than one page, it should be split into multiple pages automatically.

---

Screenshot:

---

Environment:

• vue-data-ui: 2.15.4
• Vue: 3.x
• Browser: Chrome
• OS: macOS

---

[graphieros]

Hi @thawat6

I'm currently working on improvements for the VueUiDashboard component, I'll see what I can do regarding pdf issues you mentioned.

In the meantime, I recommend you upgrade to the latest version of the library, because it includes some improvements regarding pdf layouts.

[thawat6]

Hi @thawat6

I'm currently working on improvements for the VueUiDashboard component, I'll see what I can do regarding pdf issues you mentioned.

In the meantime, I recommend you upgrade to the latest version of the library, because it includes some improvements regarding pdf layouts.

I updated to the latest version of vue-data-ui, but the issue with the PDF export layout (charts not fitting the page, too much white space) still persists.

In addition, I would like to know:

1. Is there a way to set a custom filename for the exported PDF? (e.g., dashboard-report.pdf instead of the default one)

2. Can we configure the page size and orientation (e.g., A4 landscape/portrait) when exporting the dashboard?

These features would be very useful for reporting purposes.

Thanks again for your work on improving the VueUiDashboard component

[graphieros]

@thawat6

In addition, I would like to know:

1. Is there a way to set a custom filename for the exported PDF? (e.g., dashboard-report.pdf instead of the default one)
2. Can we configure the page size and orientation (e.g., A4 landscape/portrait) when exporting the dashboard?

1 & 2. Not currently on VueUiDashboard, this is part of future improvements I was mentioning

[graphieros]

@thawat6

You can upgrade to v3.1.2, which improves config options and pdf layout.

To modify the dimensions of your dashboard, use config.style.board.aspectRatio (you probably already know that).
The aspect ratio of your PDF will be exactly the same as the dashboard's.
You can now also export a PNG.

The dimensions of chart components placed inside the dashboard will not change. Any white space is now the reflection of your dashboard layout. I understand it is probably not the perfect answer for your issue, but it is a step forward nevertheless.

Cheers