Search code examples
highchartshighcharts-ngangular2-highcharts

How can i align the highchart legend pagination to right or left side of the legends?

I wanted to move the legend pagination to the right or left side of the legends

Fiddle link

  "legend":{
  "enabled":true,
  "maxHeight":50,
  "itemMarginTop":5,
  "navigation":{
     "activeColor":"#1d4659",
     "animation":true,
     "inactiveColor":"rgba(29, 70, 89, 0.5)"
  }

Sample chart

Solution

  • You can wrap scroll method and position the arrows according to your requirements:

    (function(H) {
    H.wrap(H.Legend.prototype, 'scroll', function(proceed) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        this.nav.attr({
            translateY: 10,
            translateX: 390
        });
    });
}(Highcharts));

    Live demo: http://jsfiddle.net/BlackLabel/25ahwq1k/

    Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts