How to add a fully custom html section to the fullscreen mode of Highcharts?

Question

I have a chart, above it, there is a div (I refer to it as topbar ) which contains a few buttons, a select menu and a span element with some text in it. When I go to fullscreen mode of the highcharts, the chart itself is visible but the topbar is no longer visible. This is because highcharts fullscreen feature, only uses the chart container and ignores the parent element. But I need that topbar to be visible even when I fullscreen the chart.

I searched a lot and seems like Highcharts allows text and buttons to be rendered on the chart in fullscreen mode. Example for a button in this post this one is just buttons.

Also tried this post but this one is just text.

My problem is more complex. I don't just have buttons. I have a complex container with not just buttons and text, but menus, dropdown lists, etc.

I also tried this:

chart: {
          type: "column",
          events: {
            fullscreenOpen: function () {
              chart.renderer
                .html(document.querySelector(".original-top-bar").innerHTML, 20, 20)
                .attr({
                  id: "top-bar"
                })
                .add();
            },
            fullscreenClose: function () {
              document.querySelector('#fullscreen-top-bar').remove();
            }
          }
        },

But the select element's don't show up, nothing shows up correctly and none of the buttons work.

So here's the question: Is there a way to just put a div with any content, in fullscreen mode of highcharts and if not, why not?

Answer 1

You can overwrite the Highcharts.Fullscreen#open method and change the HTML element on which requestFullscreen method is called. For example:

Default:

const promise = chart.renderTo[fullscreen.browserProps.requestFullscreen]();

Changed:

const mainContainer = document.getElementById('mainContainer');
const promise = mainContainer[fullscreen.browserProps.requestFullscreen]();

---

Live demo: https://jsfiddle.net/BlackLabel/uqot9vxw/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts