Show checkboxes and usehtml within diagram legend does not work well if scrollablePlotArea is configured

[toh82]

Expected behaviour

1. Highcharts series checkboxes should stick to the Legend lables on scrollable plot areas
2. HTML formatted legend should also be visible on scrollable plot areas

Actual behaviour

If you want to have swipable diagrams on mobile or a specific viewport you can activate chart.scrollablePlotArea https://api.highcharts.com/highcharts/chart.scrollablePlotArea

And if you want to use the checkbox feature plotOptions.series.showCheckbox within the same diagram, it will happen that your checkboxes are not visible or they'll scroll with the diagram on swiping the chart. This happens because they're placed in the highcharts-scrolling div. From my opinion, the checkboxes should be placed within the highcharts-fixed div.

Seems like an Issue in the highcharts lib, but I'm not sure.

In the following, we found another problem: If you want to use HTML for Legend formatting legend.useHTML while having chart.scrollablePlotArea configured. It will happen, that the Legend completely disappear, as soon as the chart turns swipable.

This happens, because the html legend is put into an svg (highcharts-root) wrapper within the highcharts-fixed div. As soon as you pull it out, the legend start to work again.

Live demo with steps to reproduce

both issues can be viewed here, make sure to narrow the diagram preview box until scrollbars are visible
http://jsfiddle.net/xfnq0s34/6/

Product version

highcharts v6.1.0

Affected browser(s)

all

[Denyllon]

Thank you for contacting us and reporting the issue.

To workaround it, you can move all checkboxes to the main container (which should have set position: relative), then make the chart.chartBackground: 'transparent' and set the old value of the chart's background color to the main container's color. Moving checkboxes can be executed through chart.events.load function, but changing background definition should be triggered additionally on chart.events.redraw event, that's why I created the global function to toggling the color. All steps you can achieve by this way:

var toggleBgColor = function(chart) {
  var chartBg = chart.chartBackground
  var container = chart.renderTo
  var chartBgColor = chartBg.attr('fill')

  // Set the chart background to transparent and set old color on container
  chartBg.attr({ fill: 'transparent' })
  container.style.backgroundColor = chartBgColor
}

chart: {
  events: {
    load() {
        var checkboxes = this.renderTo.querySelectorAll('input[type="checkbox"]')
        // Move checkboxes to chart container
        checkboxes.forEach(element => {
            this.renderTo.appendChild(element)
        })
        // Toggle chart's background color
        toggleBgColor(this)
      },
    redraw() {
      toggleBgColor(this)
    }
  }
}

Live example: http://jsfiddle.net/L3nm0ouq/

[toh82]

Interesting Workaround, Thanks.
The Workaround I used is a bit shorter, I just moved the legend out of the svg with JS ;)

[TorsteinHonsi]

Demo with the fix applied: http://jsfiddle.net/highcharts/xfnq0s34/34/.

Generally, the useHTML cases were fixed in another commit earlier today.