Show checkboxes and usehtml within diagram legend does not work well if scrollablePlotArea is configured #8824
Comments
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 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/ |
Interesting Workaround, Thanks. |
Demo with the fix applied: http://jsfiddle.net/highcharts/xfnq0s34/34/. Generally, the |
Expected behaviour
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
The text was updated successfully, but these errors were encountered: