Untitled

<html>
  <head>
    <style>
      .legend {
        width: 100%; /* make the legend take up the whole width of the screen */
        overflow: auto; /* enable scrolling in both directions if needed */
      }
      .legend-color-box {
        float: left; /* position the color boxes next to each other */
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div id="legend">
      <div class="legend-color-box" style="background-color: #ff0000;"></div>
      <div class="legend-value">Value 1</div>
      <div class="legend-color-box" style="background-color: #00ff00;"></div>
      <div class="legend-value">Value 2</div>
      <div class="legend-color-box" style="background-color: #0000ff;"></div>
      <div class="legend-value">Value 3</div>
      ...
    </div>
    <button onclick="toggleLegend()">Show/Hide Legend</button>
    <script>
      function toggleLegend() {
        var legend = document.getElementById('legend');
        if (legend.style.display === 'none') {
          legend.style.display = 'block';
        } else {
          legend.style.display = 'none';
        }
      }
    </script>
  </body>
</html>
Editor is loading...