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

Closed
toh82 opened this Issue Aug 22, 2018 · 3 comments

Comments

Projects
None yet
3 participants
@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 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

This comment has been minimized.

Show comment
Hide comment
@Denyllon

Denyllon Aug 22, 2018

Contributor

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/

Contributor

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 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

This comment has been minimized.

Show comment
Hide comment
@toh82

toh82 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 ;)

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 ;)

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 24, 2018

Collaborator

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

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

Collaborator

TorsteinHonsi commented Aug 24, 2018

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

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