Highcharts: Legend has paging when exporting

[beniwtv]

Hi,

When you export a Pie chart with a lot of Items in the legend, paging is applied there, just as if it was a normal chart displayed on the page. Unfortunately, graphics are non-interactive :P.

I did not see any option of turning that off (for exporting or in the legend API), so I am reporting th

(See screenshoot).

[jon-a-nygaard]

Thanks for reporting. We will have a look at it as soon as possible.

_Internal note: There should be an option like legend.navigation.enabled so that we can disable navigation in exporting. The legend navigation could perhaps also be disabled by default during exporting, as a good practice.
Here is a JSFiddle which reproduces the problem. Click on the exporting menu->Download Png image_

[TorsteinHonsi]

Simply disabling the navigation has problems too, since the legend will take over the entire chart area, and items will start falling out of the image.

A possible workaround is to use a plugin that adapts the chart height to make room for the legend: http://www.highcharts.com/plugin-registry/single/8/Adapt-Chart-To-Legend.

[foxprorawks]

I tried the possible workaround, but it caused problems when exporting.

[TorsteinHonsi]

I added an enabled option like initially requested here. With the new option, you can combine it with a specific chart height for exporting, see http://jsfiddle.net/highcharts/nvuu1hjg/.

It's not perfect, since you need to hard-code (or preprocess) in order to set the exported chart height, but it works at least for this case.

[foxprorawks]

In my case, the legend is below the chart - I'm not sure how I can determine the height of the chart in order to hard code it. Will this work for me?

[TorsteinHonsi]

Yes, in fact this also works without enabling the legend. Simply by increasing the chart height in export, the legend no longer needs navigation. I guess there's no good way to determine the chart height - you can do something based on the series names, how many series are there and how long are the names etc. It will be an approximation, but perhaps good enough.

[beniwtv]

The option is good, however, without Highcharts auto-calculating the height it's possibly not enough.
We would need to somehow calculate this ourselves, but that might be inacurrate, and thus not enough for an enterprise application that users access.

[TorsteinHonsi]

I see. Actually the chart height adapt plugin should work here. You should be able to use that in export only. If you share a jsFiddle of one of your typical charts, I'd be happy to work on it.

[foxprorawks]

Hi - when will enabled option be included in the official release?

[TorsteinHonsi]

We will publish a maintenance release within a few weeks.

[foxprorawks]

Thanks.

[bouri-mounir]

I also have the same issue, any news about the fix ?

[TorsteinHonsi]

Yes, in the latest release you can disable the legend navigation for export. Also, the simple fix is to just set a greater height in export.

[bouri-mounir]

Thank you, this issue is fixed on export but it still persists when we print a chart.
What should I do ?

[TorsteinHonsi]

Good point! You can use the beforePrint and afterPrint events for that. See http://jsfiddle.net/highcharts/unz7Letj/.

[bouri-mounir]

I tried to modify navigation value but it does not work , it's work only on afterPrint event ...
http://jsfiddle.net/unz7Letj/1/

[TorsteinHonsi]

I'm afraid the legend can't be updated like that. Is there a specific reason why you can't set the height like I showed above? Without a greater height the legend will be clipped anyway, so it won't be readable.

[bouri-mounir]

It works fine for me if I change the legend maxHeight on beforePrint event instead of disabling legend navigation.
https://jsfiddle.net/bouri/pypuy4dg/1/
Thank you.

[znevrly]

Hi,
this is annoying issue, more like a bug than improvement. It will be great to fix it in some Highcharts 5.x version. Thank you a lot!

[TorsteinHonsi]

You're aware of the simple option of setting a greater height in export?

        // In export, increase the chart height to disable navigation
        exporting: {
            chartOptions: {
                chart: {
                    height: 600
                }
            }
        }

[beniwtv]

Yes, we know this option exists, but this is not a satisfactory solution. It is more of a hack bound to cause problems later.

Depending on the data, we have more or less options in the legend. So, we would need to somehow calculate the height depending on how many options there are at a given time.

This is not accurate, as we do not have a lot of internal SVG data and information that HighCharts itself has. For example, the height may depend on what font you use, how the browser renders it, new versions of HighCharts doing things differently, etc...

Unless HighCharts makes sure the Legend text box is always the same height - in which case the question would be: "How do we know? Is there an API to query for this?".

[TorsteinHonsi]

I believe the adapt chart height to legend plugin answers this question. Actually this is a perfect use case for it. I did a patch and added a demo with enabling it only for export.

Now the remaining issue is that the computed height is too large: http://jsfiddle.net/highcharts/rpq4qkd9/2/. I think that's because the total legend height is added to the total chart height. Will work on a fix in the plugin.

[beniwtv]

Awesome! That already looks very promising.

[TorsteinHonsi]

Thanks! The remaining issue is fixed now: https://github.com/highcharts/adapt-chart-to-legend/issues/10.

Live demo at http://jsfiddle.net/highcharts/rpq4qkd9/3/

[beniwtv]

Awesome! Thank you very much! Our customers are going to be very happy!

[beniwtv]

So I can report this now works flawlessly.

[TorsteinHonsi]

Wonderful!

[malaxiannv]

@TorsteinHonsi How can I use this plugin in react project? what should I import? I think I need a sentence like import ? from 'highcharts-adapt-chart-to-legend', thanks for your contribute.

[TorsteinHonsi]

I'm not sure if it is on npm - but you can just add this snippet somewhere in your project: https://rawgit.com/highcharts/adapt-chart-to-legend/master/adapt-chart-to-legend.js

[malaxiannv]

@TorsteinHonsi Thanks ,Yeah, I put your code segment in the render function of my react component, it works very well when the first time render, but the legend disappeared when my component rerender, I haven't found the solution yet, here is my simply code below.
update------------------
I debug it, find when the first time my react component render, the translateY will be changed, and the translateY will be canculates basd on the last value when the seconed time render. so my legend disappeared
translateY = this.group.attr('translateY') + this.legendHeight; this.group.attr('translateY', translateY);
so how can I fix the translateY value in the second or third or more rerender times?

 class ShowCharts extends Component {
  render() {
    (function (H) {
     const wrap=function(a,f,l){
      var q=a[f];
      a[f]=function(){
        var a=Array.prototype.slice.call(arguments),
        u=arguments,
        d=this;
        d.proceed=function(){
          q.apply(d, arguments.length?arguments:u)
        };
        a.unshift(q);
        a=l.apply(this,a);
        d.proceed=null;
        return a
        }
      }

      wrap(H.Legend.prototype, 'render', function (proceed) {
        var chart = this.chart,
          translateY,
          addedHeight;
        proceed.call(this);
        if (this.options.adjustChartSize) { // #7

          addedHeight = this.legendHeight;
          if (!chart.originalChartHeight) {
            chart.originalChartHeight = chart.chartHeight;
          }

          if (this.options.align === 'left' || this.options.align === 'right') {
            addedHeight = Math.max(this.group.translateY + this.legendHeight - chart.originalChartHeight, 0);

            // Move the legend down
          } else if (this.options.verticalAlign === 'bottom') {
            translateY = this.group.attr('translateY') + this.legendHeight;
            this.group.attr('translateY', translateY);
            if (this.group.alignAttr) {
              this.group.alignAttr.translateY = translateY;
            }
          }
          if (addedHeight) {
            //   // Adapt chart metrics
            chart.chartHeight = chart.originalChartHeight + addedHeight;
            chart.marginBottom += addedHeight;

            //   // Set the DOM element heights
            chart.container.style.height = chart.chartHeight + 'px';
            h = chart.container.style.height
            chart.renderer.boxWrapper.attr('height', chart.chartHeight); // #7

            var boxedElement = chart.renderer.box.clientWidth ? chart.renderer.box /*IE*/ : chart.renderer.box.parentElement /*FF*/ ;
            var viewBox = "0 0 " + boxedElement.clientWidth + " " + boxedElement.clientHeight;
            chart.renderer.boxWrapper.attr('viewBox', viewBox);
          }
          this.positionCheckboxes();
        }
      });
    }(Highcharts))

    Highcharts.setOptions({
      legend: {
        layout: 'vertical',
        borderWidth: 0,
        adjustChartSize: true,
        navigation: {
          enabled: false
        },
      },
    })
    let view
      // show endpoint view
      view = (
        Object.keys(endpointsdata).map((item) => {
          const options = {
            title: {
              text: title,
            },
            series: data,
          }
          return (<div className="charts"><LazyLoad height={h}><Chart container={'chart'} options={options} /></LazyLoad></div>)
        })
      )
    }

    return (
      <div className="charts-container">
        {
          view
        }
      </div>
    )
  }
}

[pawelfus]

This should be included as a plugin, for example a separate file. I mean this should be called only once, when Highcharts library is loaded.