[Charts] - Print chart with no hamburger menu

Hello everyone


The project I'm currently working on has a bunch of charts that we are building with the Charts component for version 10.0.904.0. 

We have enabled exportation using the AdvancedFormat_Init built in action, setting the HighchartsJSON field to have 

exporting: {

                  true

                  },


As you can see on the following picture, we have the option to Print the chart, or download it as a .png, .jpeg, pdf or .svg file. 

All download options work great, but unfortunately, the Print chart option generates a sheet where the hamburger menu is visible and the chart is not vertical-aligned on the page as seen on the following image:

Do you guys know a way to hide the hamburger menu and vertical align the chart to the center of the page? 

As another option, but not as good, is it possible to hide only the 'Print chart' option shown on the first image?


Thanks a lot

Best regards,

Ângelo Sousa

Solution

Hello Ângelo,

To hide the 'Print Chart' option you can initialize your graph with the following set in your AdvancedFormatInit.HighchartsJSON property :

exporting: {
    enabled: true,
    buttons: {
            contextButton: {
                menuItems: ['downloadPNG','downloadJPEG','downloadPDF', 'downloadSVG']
            }
    }
}

For more information about the exporting properties that you can manipulate you can consult this Link.


If you want to keep the 'Print chart' option you can use the @media print CSS property to hide the button/control the vertical alignment of the chart.

Just add this CSS to your page Style Sheet:

@media print
{    
    .highcharts-button.highcharts-contextbutton, .highcharts-button.highcharts-contextbutton *
    {
        display: none !important;
    }
    
    .OSChart{
        position: relative;
    }
    
    .highcharts-container{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
}

 

You can find an example built in Outsystems in here.


If this helps in solving your issue please mark as solution,

Best Regards

Diogo Falcão

Solution

Hello Diogo

The solution you gave to hide the hamburger button and vertical-align the chart on the page worked perfectly!

Thanks a lot!

Best regards,

Ângelo Sousa