title: How to put the legend at the bottom of the chart before load of data in apex chart using js?
body: <p>I tried to put the legend title with its color code at the bottom of the chart before a load of data.
  Here is the code I tried. Kindly let me know the corrections to be made.</p>
  <pre><code>   var options = {
          series: [],
          chart: {
            height: 350,
            type: 'line',
            toolbar: {
              show: true
            },
            zoom: {
              enabled: false,
            }
          },
          legend: {
            show:true,
            position: 'bottom',
            floating: true,
            verticalAlign: 'bottom',
            align:'center'
          },
          tooltip: {
            shared: true
          },
          colors: ['#77B6EA', '#545454'],
          dataLabels: {
            enabled: true
          },
  </code></pre>
  <p>Here is the image of display</p>
  <p><a href="https://i.stack.imgur.com/m26i6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m26i6.png" alt="Output displaying and the needed legend details" /></a></p>