title: Charts overlapping py-script flask
body: <p>I have created sample Flask UI to display Bar and Pie chart using py-script. I noticed that when the bar chart py-script section is kept on top both bar and pie chart is visible but when pie chart py-script is kept on top it results in overlapping of the charts.</p>
  <p><a href="https://i.stack.imgur.com/IVFzX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IVFzX.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://pyscript.net/alpha/pyscript.css&quot; /&gt;
        &lt;script defer src=&quot;https://pyscript.net/alpha/pyscript.js&quot;&gt;&lt;/script&gt;
  
        &lt;py-env&gt;
          - pandas
          - numpy
          - matplotlib
        &lt;/py-env&gt;
    &lt;/head&gt;
    &lt;body&gt;
  &lt;py-script&gt;
  
  
  from matplotlib import pyplot as plt
  import numpy as np
  
  
  # Creating dataset
  
  
  # Creating plot
  fig = plt.figure(figsize =(10, 7))
  plt.pie({{pt}}, labels = {{ct}})
  
  # show plot
  plt
  
  &lt;/py-script&gt;
  
  &lt;py-script&gt;
  import matplotlib.pyplot as plt
  
  y = list({{data}}.keys())
  x = list({{data}}.values())
  
  
  plt.barh(y, x, color=['red', 'green', 'blue', 'cyan'])
  
  
  # setting label of y-axis
  plt.ylabel(&quot;pen sold&quot;)
  
  # setting label of x-axis
  plt.xlabel(&quot;price&quot;)
  plt.title(&quot;Horizontal bar graph&quot;)
  plt
  
  &lt;/py-script&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p>Regards,
  Rohan</p>