Simple Lucidchart viewer without scrolling for embedded charts

  • 7 August 2023
  • 6 replies
  • 101 views

Badge +3

The embedded Lucid chart is displayed in a viewer where the user can scroll the chart even if the entire chart fits the window. It is very easy to accidentally scroll the chart out of view in the viewer.

Is there a simple embedded viewer option where the chart is fixed in the viewer? 


Comments

Userlevel 2
Badge

Hi Laszlo thank you for your question.

Unfortunately we do not currently support this feature. However if the document isn't changing you could export the document as an image and use that to make the chart view fixed. We understand that this doesn't solve your use case if you still want the document to update though. Let us know if you have any more questions.

Had this same issue just come up. Unfortunate that we don't have more granular controls on the embed code. I see by default there is an "allowfullscreen" control inserted in the code. Are there any other controls currently available and is disabling scroll on your roadmap? Some other options which would help:

Disable scroll (horizontal and/or vertical)

control which page/tab loads

set window/zoom level

Badge +3

I have solved the issue by placing a transparent layer on top of the chart. It prevents all interactions with the viewer including the accidental scroll and zoom.

  • I have created a 1x1 pixel transparent png file: transparent-1_1.png
  • Enclosed the embedded chart in a parent DIV and placed the transparent layer on top of it
  • Set the width and height in the parent DIV and use " width: 100% height: 100% " in the transparent IMG and the IFRAME code to match all sizes
  • This syntax is for Remix React.js which uses {{ }} around the style elements but it should be easy to reformat it for regular CSS
        <div style={{width: '960px' height: '720px' margin: 'auto' position: 'relative'}}>
          <img src="transparent-1_1.png" style={{width: '100%' height: '100%' position: 'absolute'}}/> 
        <iframe allowFullScreen frameBorder="0" style={{width: '100%' height: '100%'}} src="https://lucid.app/documents/embedded/MY_GUID" id="MY_ID">
          </iframe>
        </div>

Hello Together

Are there any other solutions to this problem? I'm afraid that Laszlo's might not work for us. We use Lucidchart as a process map that we want to embed in Jira among other things. Within this we jump to lower levels of the map via hyperlink.

Badge +1

Unfortunately we do not have a solution to this problem at this time. We recognize the current embedded experience has limitations and are working on an improved embedding experience.  However I don't yet have a estimated date when that will become available.

Badge

In “Atlassian Confluence” turning off the “Use Rich Lucidchart viewer” In the Diagram Properties window, solves the issue. 

 

Reply