[Feature] Support saving monitor history charts as PNG in the React frontend
Maintainers usually reply within 2 days
@butterfly-520-boy is already working on this.
Since Oct 19, 2026.
- #4476 by @butterfly-520-boy — open
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 70/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- javascript, react
- Domain
- frontend, observability
Research direction
Start in the React monitor detail page and locate the history chart and its existing controls. Check how the chart exposes its displayed data and current theme, then identify the relevant frontend tests or run instructions. Done means a button beside the controls downloads the displayed metric and time range as a PNG locally, stays disabled while loading or without data, and remains usable on narrow screens.
Written by the indexing model from the issue text.
Description
Feature Request
Add a “Save chart image” action to the monitor detail page in the React frontend, so users can download the displayed history chart as a PNG.
Is your feature request related to a problem? Please describe
When investigating a monitoring issue, I sometimes need to share a history chart or attach it to a report. The React frontend currently has no dedicated action for saving the chart as an image, so I have to take a screenshot and crop it manually.
Describe the solution you'd like
Add a download button beside the existing history chart controls.
The exported PNG should capture the displayed chart for the selected metric, time range and raw or aggregated mode, using the current theme background.
The button should be disabled while the chart is loading or has no data. It should also remain accessible on narrow screens.
Exporting should happen locally in the browser without requesting the history data again.
Describe alternatives you've considered
This request targets HertzBeat 2.0-SNAPSHOT and the React frontend.
I have tested a local implementation with a real backend on Windows using Microsoft Edge. Downloading a history chart as PNG works, and the download button remains usable when the browser window is narrowed.
I would like to contribute a PR for this feature.
Additional context
- Dominant language
- Java
- Stars
- 7.4k
- Forks
- 1.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 37
Getting set up
Starts the project's dev container in your browser, under your own GitHub account.
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from apache/hertzbeat
-
[Feature] <title>When selecting monitoring items, the "Select All on Current Page" checkbox will only display issuesPossibly taken @butterfly-520-boy claimed this 16 days ago. Opennew feature
Difficulty 2/5 1-3 hours Newbie friendliness 62/100
apache/hertzbeat#4425 · 5 comments ·
Maintainers usually reply within 2 days
-
[Feature] <title>The "Select All" option is at the bottom, while more operations are above, which is quite inconvenient. Move the "Select All" box to the top to enhance the user experiencePossibly taken @butterfly-520-boy claimed this 16 days ago. Opennew feature
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
apache/hertzbeat#4424 · 1 comment ·
Maintainers usually reply within 2 days
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
apache/hertzbeat#4340 · 1 comment ·
Maintainers usually reply within 2 days
-
[BUG] Metric group and field names are not localized in the React monitor detail pagePossibly taken @butterfly-520-boy claimed this 4 days ago. Openbug
Difficulty 3/5 Half a day Newbie friendliness 35/100
Maintainers usually reply within 2 days
-
[BUG] Layout and localization issues on the React monitor detail pagePossibly taken @butterfly-520-boy claimed this 5 days ago. Openbug
Difficulty 3/5 1-2 days Newbie friendliness 55/100
Maintainers usually reply within 2 days
All issues in apache/hertzbeat
Similar issues
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 61/100
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
ReChronoRain/HyperCeiler#1743 ·
Maintainers usually reply within 6 days
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
ControlSystemStudio/phoebus#3979 ·
Maintainers usually reply within 2 days
-
Cannot find symbol CTypedefPossibly taken @pellico claimed this today. Openbug
Difficulty 1/5 Under an hour Newbie friendliness 82/100