Anychart remove 1 plot from a plot with many different plots

Question

I am particularly looking at anystock. The base plot is a candlestick plot, with the option of adding multiple technical indicators through checkboxes. A plot can have multiple technical indicators. There might be 1 indicator, 2 indicators, or even 4 indicators. The indicators might not be plotted in order, as it is based on a “checkbox”, i.e the indicator is plotted only when the user selects it. Now when a user unselects the checkbox, I want to remove the indicated indicator associated with that particular checkbox.

I did research about it and tried some solutions but so far, none were fit for my case. I looked at getSeries and removeSeries, also tried enabled(false) but that hides the whole plot which is not what I want. I would say the getSeries and removeSeries is the closest to what I want, but then it brings back to the issue of the indicators not being plotted in order so it is quite tough for the getSeries function.

Some references:https://api.anychart.com/v8/anychart.charts.Cartesian#getSeriesAt

https://playground.anychart.com/api/core/stock/_samples/anychart.core.stock.Plot.removeSeries

Here is a sample code with the getSeries/removeSeries function:

$('#id).click(function () {
            if($('#id)[0].checked === true) {
                var psar = chart.plot(0).psar(mapping, 0.08, 0.60, 0.10).series();
                psar.stroke("0.5 lightGray");
                chart.plot(0).getSeriesAt(4).id('4');
            } else {
                chart.plot(0).removeSeries('4');
            }
        })

Ideally, what I want is something like

$('#id).click(function () {
            if($('#id)[0].checked === true) {
                var psar = chart.plot(0).psar(mapping, 0.08, 0.60, 0.10).series();
                psar.stroke("0.5 lightGray");
            } else {
                psar.enabled(false);
            }
        })

Note that

chart = anychart.stock();

Any tips would be appreciated!

Answer 1

Yes, you are right. It is good practice to remove indicator’s series from the plot by removeSeriesAt().

Your example seems quite correct.

One more way to achieve toggle behavior is by turning off the indicator's series at the creation step. Then, you just turn them on or off by handling desireable events (button, click, swipe, etc.).

     // Create psar indicator.
    let psar = plot.psar(mapping, 0.02, 0.08, 0.6, 'marker');

    // Disable psar indicator.
    psar.series().enabled(false);

    // Create mma indicator.
    let mma = plot.mma(mapping, 10);

    // Disable mma indicator.
    mma.series().enabled(false);

    
    //Function to toggle PSAR indicator.
           let psarBtnClick = () => {
          if(psar.series().enabled()){
            psar.series().enabled(false)
          }else{
            psar.series().enabled(true)
          }
       }

    //Function to toggle MMA indicator.
     let mmaBtnClick = () => {
        if(mma.enabled()){
            mma.enabled(false)
        }else{
            mma.enabled(true)
             }
      }
    
    //Add button click handlers.
    document.getElementById("PSAR").addEventListener("click", ()=>{psarBtnClick()})
    document.getElementById("MMA").addEventListener("click", ()=>{mmaBtnClick()})

While it is possible to remove indicator series, it is not possible to remove plots in the same way. So you can toggle series, but you can’t toggle plots the same way.

We encourage you to explore toggling indicator's series in our playground