Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's what worked:</p> <p>I created a new method that fires on the X-Axis afterSetExtremes() method (I suppose if you were doing this on the y-Axis you'd fire it there instead). I basically just took the code from the above two methods and stuck it all in there. Here's the code that fires off from the xAxis.afterSetExtremes() event:</p> <pre><code> AfterChartSetExteremes: function (xAxis) { var plotBandData = new Array(); for (var i = 0; i &lt; xAxis.plotLinesAndBands.length; i++) { //get all the plot band info so we can recreate them after resize var plotBand = xAxis.plotLinesAndBands[i]; 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 x = 0; x &lt; plotBandData.length; x++) { xAxis.removePlotBand(plotBandData[x].id); } for (var y = 0; y &lt; plotBandData.length; y++) { //Add plotband back in xAxis.addPlotBand({ from: plotBandData[y].from, to: plotBandData[y].to, color: plotBandData[y].color, id: plotBandData[y].id, iMBottom: plotBandData[y].bottom, iMTop: plotBandData[y].top }); } $.each(xAxis.plotLinesAndBands, function (i, pband) { if (this.svgElem !== undefined) { var band = this.svgElem; path = band.d.split(' '); var bottomString = this.options.iMBottom + ''; var topString = this.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; this.svgElem.attr('d', path); } }); //Need to reset formatter here? } </code></pre> <p>The xAxis from the function is "this" from the afterSetExtremes event, so I just passed it through like this:</p> <pre><code>function() {return PureSense.Clifford.IM.Charting.AfterChartSetExteremes(this);} </code></pre> <p>that works. All the plotbands get resized after zooming in or resetting zoom. I actually walked all the way through the highcharts code with the methods in my initial post. I saw that the SVG values did get set correctly and held all the way through. Something happens outside of redraw though and I couldn't catch it.</p> <p>I do know it happens though because if you look at my comments the "d" array is two items short of the SVG element on the page (if you view it with F12 dev tools). The afterSetExtreme event fires after redraw and after the zoom happens. I think writing those values during redraw causes them to get overwritten when the zoom finalizes.</p> <p>Hope that's helpful to someone else.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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