CODEWITHSUNDEEP
javascriptjqueryhighchartsheatmap
Shaun
Shaun

Reputation: 471

How to position heatmap legend title in different position?

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 "number of MMF share classes" below the legend scale in the same vertical position as the y-axis label on left?

https://jsfiddle.net/samwhite/5d6kL32o/2/

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: <strong>${(this.y / 10000)}</strong>
             <br/>Date: <strong>${xcats[this.x]}</strong> 
             <br/>Number of Share Classes: <strong>${this.value}</strong>`
        }
      },
      legend: {
      title: {
          text: 'number of<br/>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']
        ]
      }],

Upvotes: 1

Views: 356

Answers (1)

Marco Aurelio Fernandez Reyes
Marco Aurelio Fernandez Reyes

Reputation: 2431

An option could be use the code posted on this thread:

Quote:

Highcharts is not providing this option for legend title. You can achieve your goal by translating your title in callback function:

function (chart) {
        var title = chart.legend.title;
        title.translate(x, y);
}

I've modified your code as follows:

Example:

legend: {
  title: {
    text: 'number of<br/>MMF share classes',
    style: {
      fontWeight: 'normal'
    }
  },
  align: 'right',
  //y: 80, // <- comment this line.
  padding: 20,
  verticalAlign: 'middle',
  symbolHeight: 300
},

Then:

// After the "highcharts" settings, add: 
, function(chart) {
    var title = chart.legend.title;
    title.translate(0, 370);
  }

Here is the modified jsfiddle.

Upvotes: 1

Related Questions