'How do I position IIFE charts within an HTML page?

The chart isn't showing within the element where I placed the chart's script snippet. Instead it's appearing at the bottom of the page after all HTML elements.

Script is placed here:

<body>
   <div1>
       <div2>
           <script>CHART SCRIPT</script>
       </div2>
   </div1>
</body>

Yet appears outside the DIV, like:

<body>
   <div1>
       <div2>
           <script>CHART SCRIPT</script>
       </div2>
   </div1>
   [CHART DISPLAYING HERE]
</body>
htmllightningchart


Solution 1:[1]

The location of the script element that invokes LightningChart JS is not tied to the the location of the chart.

If you think about it, this is logical because one script could create multiple charts which could be nice to have in different locations on the web page.

To position your chart on a DIV element of your choosing, specify that DIV when creating the chart:

<body>
   <div>
       <div id = 'chart-container'></div>
   </div>
   <script>
       const chart = lightningChart().ChartXY({
           container: document.getElementById('chart-container')
       })
   </script>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Niilo Keinänen

Related Questions