StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHighcharts Is there a way to resize plotbands after zoom?
text
Body
copied!<p>I'm doing something like this to resize my plotband when the chart renders:</p> <pre><code> var _Chart = new Highcharts.Chart( options, function ( chart ) { for ( var i = 0; i < chart.xAxis[0].plotLinesAndBands.length; i++ ) { var band = chart.xAxis[0].plotLinesAndBands[i].svgElem, path = band.d.split(' '); var bottomString = chart.xAxis[0].plotLinesAndBands[i].options.iMBottom + ''; var topString = chart.xAxis[0].plotLinesAndBands[i].options.iMTop + ''; path[2] = bottomString; path[path.length - 1] = bottomString; path[5] = topString; path[7] = topString; band.attr('d', path); } }); </code></pre> <p>That allows me to set the top and bottom of a chart's Y-Axis. We're displaying several Y-Axis in the same chart with some padding between them and each axis may have it's own plotbands. I don't want those to spill over into the other Axis since they look like smaller individual charts. I'm also changing the hover formatter to display a tooltip for these plotbands if a point within the band is hovered over.</p> <p>The issue I'm having is that if you click, drag to zoom the plotbands revert back to the state where they bands go through the entire chart. I wrote some code to remove them and add them back in, but it seems like I'd need a callback on the addPlotBand function to change the SVG array before it's actually added and rendered. I've tried re-adding it then trying to redraw it, that didn't work. </p> <p>Is there a way for me to adjust the SVG element when adding a new plotband so that I can alter the SVG element?</p> <p>Edit:</p> <p>Here's some more info. I tried using the selection event to delete all bands then call redraw, which calls a custom redraw event to put the SVG values back. Here's how that looks (the select event is first kinda crude but it works):</p> <pre><code> SelectChart: function (chart) { var plotBandData = new Array(); for (var i = 0; i < chart.xAxis[0].plotLinesAndBands.length; i++) { var band = chart.xAxis[0].plotLinesAndBands[i].svgElem, path = band.d.split(' '); var plotBand = chart.xAxis[0].plotLinesAndBands[i]; //get all the plot band info so we can recreate them after resize var pbd = { from: plotBand.options.from, to: plotBand.options.to, id: plotBand.options.id, bottom: plotBand.options.iMBottom, top: plotBand.options.iMTop, color: plotBand.options.color }; plotBandData.push(pbd); } //delete all existing plot bands: for (var i = 0; i < plotBandData.length; i++) { chart.xAxis[0].removePlotBand(plotBandData[i].id); } for (var i = 0; i < plotBandData.length; i++) { //Add plotband back in chart.xAxis[0].addPlotBand({ from: plotBandData[i].from, to: plotBandData[i].to, color: plotBandData[i].color, id: plotBandData[i].id, iMBottom: plotBandData[i].bottom, iMTop: plotBandData[i].top }); } }, </code></pre> <p>Then my redraw event looks something like this:</p> <pre><code> RedrawChart: function (chart){ //SVG Code: for (var i = 0; i < chart.xAxis[0].plotLinesAndBands.length; i++) { var band = chart.xAxis[0].plotLinesAndBands[i].svgElem, path = band.d.split(' '); var bottomString = chart.xAxis[0].plotLinesAndBands[i].options.iMBottom + ''; var topString = chart.xAxis[0].plotLinesAndBands[i].options.iMTop + ''; path[2] = bottomString; path[path.length - 1] = bottomString; /*JH: this is interesting, the second value for top is typically in the 8th spot in the array However, before it's rendered the two right most "L"s are removed shifting everything to the left. an example would be: After render: M 525 100 L 525 100 L 525 50 L 707 50 L 707 100 Before render (which is the state it's in here): M 525 100 L 525 100 L 525 50 707 50 707 100 So you can see that the 8th value after render which is second top is shifted over one space. The last value which is the second bottom is shifted over 2 spaces. */ path[5] = topString; path[7] = topString; band.attr('d', path); } }, </code></pre> <p>My SVG values are correct at the end of redraw, however, the heights still get rendered to the full height of the chart.</p> <p><strong>Edit:</strong></p> <p>Now if I zoom in only the plotbands visible in the zoom stretch to the full height of the chart. Upon resetting zoom all all other plotbands are the correct size. Then if I select an area of the chart with no bands then click zoom out all the chart bands are correct. Seems to have something to do with only visible plotbands on select.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload