title: How to position heatmap legend title in different position?
body: <p>I have a heatmap that has a legend scale on the right side with label on top. I would like to know if it's possible to move the label &quot;<strong>number of MMF share classes</strong>&quot; below the legend scale in the same vertical position as the y-axis label on left?</p>
  <p><a href="https://jsfiddle.net/samwhite/5d6kL32o/2/" rel="nofollow noreferrer">https://jsfiddle.net/samwhite/5d6kL32o/2/</a></p>
  <pre><code>xAxis: {
          // categories: this.value,
          title: {
            text: 'Date'
          },
          labels: {
            autoRotation: [-10],
            formatter: function () {
              var dt = xcats[this.value];
              var date = new Date(dt);
              var month = date.getUTCMonth() + 1;
              var year = date.getUTCFullYear()
              return `${year}` 
            }
          },
          tickInterval: 45
        },
        yAxis: {
          title: {
            text: 'Price ($)'
          },
          labels: {
            formatter: function () {
              return `$${(this.value / 10000).toFixed(4)}`;
            }
          },
          min: ymin*10000,
          max: ymax*10000,
          plotLines: [{
            value: 10000,
            color: 'darkred',
            dashStyle: 'shortdash',
            width: 0.2,
            zIndex: 5
          }]
        },
        tooltip: {
          pointFormatter: function () {
            return `NAV per share: &lt;strong&gt;${(this.y / 10000)}&lt;/strong&gt;
               &lt;br/&gt;Date: &lt;strong&gt;${xcats[this.x]}&lt;/strong&gt; 
               &lt;br/&gt;Number of Share Classes: &lt;strong&gt;${this.value}&lt;/strong&gt;`
          }
        },
        legend: {
        title: {
            text: 'number of&lt;br/&gt;MMF share classes',
            style: {
              fontWeight: 'normal'
            }
          },
          align: 'right',
          y: 80,
          padding: 20,
          verticalAlign: 'middle',
          symbolHeight: 300
        },
        colorAxis: [{
          type: 'linear',
          reversed: false,
          layout: 'vertical',
          stops: [
            [0, '#c8daf9'],[1.0, '#537dca']
          ]
        }],
  </code></pre>