Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

toh82 opened this issue Aug 22, 2018 · 3 comments


Copy link

@toh82 toh82 commented Aug 22, 2018

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

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

Product version

highcharts v6.1.0

Affected browser(s)


Copy link

@Denyllon Denyllon commented Aug 22, 2018

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 function, but changing background definition should be triggered additionally on 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' }) = chartBgColor
chart: {
  events: {
    load() {
        var checkboxes = this.renderTo.querySelectorAll('input[type="checkbox"]')
        // Move checkboxes to chart container
        checkboxes.forEach(element => {
        // Toggle chart's background color
    redraw() {

Live example:

Copy link

@toh82 toh82 commented Aug 23, 2018

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

Copy link

@TorsteinHonsi TorsteinHonsi commented Aug 24, 2018

Demo with the fix applied:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants