Show/Hide plotBand Error

[nhicap19]

Hello,

I am using some Show/Hide plotBand code, and initially, it does what I want it to. However, when zooming in or scrolling or toggling another series, the plotBands show back up when I want them toggled off. This is a simplified version of my project, which contains 20+ plotBands and a much longer time series.

http://jsfiddle.net/nhng5827/pef9acLm/3/

Nhi

[rafalS]

Hi, nhicap19!

You are right - after zooming plotBands become visible. As a workaround, you can use a flag variable in the main chart object. This flag tells us if plotBands should be visible or not and sets the same status in afterSetExtremes() method.

simplified jsFiddle: https://jsfiddle.net/BlackLabel/h4b2fxng/

API Reference: https://api.highcharts.com/highcharts/x ... etExtremes

Best regards!

[nhicap19]

Hi rafalS,

This appears to not work for my synchronized chart. Are you able to get this code functioning on my simpler example that I linked?

Thanks!

[rafalS]

To be honest, it was easier and faster for me to create a new fiddle and write whole code from scratch than working on yours. Could you at least simplify your even more?

[nhicap19]

Hi rafalS,

Unfortunately, this is probably as simple as it gets. I just need to be able to toggle plotbands on a set of synchronized charts with multiple series, so if you could get it working from your own example of synchronized charts, I might be able to go from there.

Thanks

[rafalS]

nhicap19,

I asked you only to remove redundant code. The less code = the easier and faster for me to understand and find a solution But it's ok, I managed to simplify your demo on my own.

It wasn't difficult to implement my solution to your code - the only thing I had to do is to change plotBand index from 0 to 1 (because the first is your plotLine, not plotBand).

The only thing you have to change in your code is:

Code: Select all

function(chartObj) {
          chartObj.plotBandsVisible = true;
          $('#btn').click(function() {
            console.log(chartObj)
            var plotBand = chartObj.xAxis[0].plotLinesAndBands[1];

            if (chartObj.plotBandsVisible) {
              chartObj.plotBandsVisible = false;
              plotBand.svgElem.hide();
            } else {
              chartObj.plotBandsVisible = true;
              plotBand.svgElem.show();
            }
          });
        });

And add the afterSetExtremes() function:

Code: Select all

afterSetExtremes() {
                let chart = this.chart;
                if (!chart.plotBandsVisible) {
                  chart.xAxis[0].plotLinesAndBands[1].svgElem.hide();
                  chart.plotBandsVisible = false;
                }
              }

jsFiddle: http://jsfiddle.net/BlackLabel/scfjn9gz/

Best regards!

[nhicap19]

Hello, thanks for giving your time.

Yes, that is what I managed to do after your first reply. But what you'll notice in your version you just sent is that the plots are no longer synchronized. I need these two plots to be synchronized-- hence why both graphs are present for the simplified version.

[rafalS]

What do you mean saying "no longer synchronized"? They are synchronized in the last fiddle I sent you. They are working the same as in your fiddle from the very first post. Am I missing something?

Have a good week!

[nhicap19]

When I open up the last fiddle, I only see the tooltip on the top chart (attached).

Nhi

[rafalS]

nhicap19,

But they are synchronized in the fiddle from your first post, right? It is enough to copy and paste the code I gave you to your first fiddle.
Forgive me, but I still do not know how can I help you.

Best regards!

[nhicap19]

Hey rafalS,

You're right, it does stay synchronized. My next question is: If there were multiple plotbands per chart, lets say 2 instead, but I wanted to be able to toggle on/off the plotLine separately from the plotBand using buttons, is there a way to do that? I'd like to use this plotLine toggle code as a feature http://jsfiddle.net/ors831wt/

Nhi

[rafalS]

Hmm, I don't quite know how exactly should it work, but, of course, you can control every plotLine/plotBand separately. Here is your updated example of how you can achieve this: https://jsfiddle.net/BlackLabel/928hp3yz/.

If you want to get more info or another example, you need to provide me a specific and simplified demo with instructions of what exactly you want to achieve - then I will be able to fit the best solution for you

Best regards!