Bollinger Bands in React Chart API do not render

[Benny Neugebauer]

Based on the official example, I am trying to render Bollinger Bands. I can get the candle chart to render but the Bollinger Bands don't appear. I made sure that "seriesName" in the "IndicatorDirective" is the same as the "name" from "SeriesDirective". Is there anything else that must be checked? Unfortunately, the official example on StackBlitz doesn't run.

Did anyone here successfully created Bolliner Bands using the "ChartComponent"?

[Srihari Muthukaruppan]

Hi Benny, 

We have analyzed your query. Unfortunately, we are unable to reproduce the reported scenario Bollinger band in the chart is working fine in the latest version 18.4.39. We have also attached the sample used for testing. Please find the sample below. 

 

Sample: https://stackblitz.com/edit/react-gn6bkr?file=index.js 

 

Screenshot: 

 

 

If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.  

1. Try to reproduce the reported scenario in the provided sample.  
2. Share the details if you have done any other customization.

 

Regards, 

Srihari M 

[Benny Neugebauer]

Thank you very much for your help! After thoroughly reviewing the StackBlitz demo, I realized that I defined the "IndicatorsDirective" within the "SeriesCollectionDirective", which was wrong. I don't know why, but when I clicked "Edit in StackBlitz" on this page, it always shows me: Can't find packages:
@syncfusion/ej2-base@syncfusion/ej2-splitbuttons@syncfusion/ej2-buttons@syncfusion/ej2-file-utils

So it was good, that you shared the direct StackBlitz link with me!

Thanks again.

Benny

[Srihari Muthukaruppan]

Hi Benny, 

 

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari M 

[Benny Neugebauer]

Hi Srihari,

I actually do have another problem. I want to conditionally render an "IndicatorDirective" (i.e. Bollinger Bands) and I created a state to control the condition:

const [showBollinger, setShowBollinger] = useState<boolean>(true);

My "IndicatorDirective" is rendered, depending on the state of "showBollinger":

<IndicatorsDirective>

  {showBollinger && (

    <IndicatorDirective

      animation={{enable: false}}

      field="Close"

      fill="#606eff"

      lowerLine={{color: '#f2ec2f', width: 1}}

      period={19}

      seriesName={seriesName}

      standardDeviation={2}

      type="BollingerBands"

      upperLine={{color: '#ffb735', width: 1}}></IndicatorDirective>

  )}

</IndicatorsDirective>

This works great for the first render of my function component but when I change the state of "showBollinger" (by using "setShowBollinger" from a checkbox), the "IndicatorDirective" in the chart is still visible (depending on it's very first state). I can't explain to myself why is that. Do you have an idea?

Best,
Benny

[Srihari Muthukaruppan]

Hi Benny, 

  

We have analyzed your query. We are able to reproduce the reported issue in your mentioned version. Since we are validating the cause of your reported scenario, therefore we need additional time to validate it further and will update the status in 1 business day (February 5, 2021). We appreciate your valuable patience until then. 

 

Regards, 

Srihari 

[Srihari Muthukaruppan]

Hi Benny,  

   

We have analyzed your query. From that, we would like to let you know that we have considered this scenario as a bug and logged a bug request on this and you can keep track of it from the below feedback portal link.      

         

Feedback Link: https://www.syncfusion.com/feedback/22156/dynamic-change-using-usestate-does-not-work-properly 

   

This fix will be available in our weekly patch release which is scheduled to be rolled out on or before 23 February 2021. We appreciate your patience until then.    

  

Regards,  

Srihari M 

[Srihari Muthukaruppan]

Hi Benny, 

 

Due to some technical issues, we are unable to include this fix in this patch release. We will consider this issue in our upcoming weekly patch release which is expected to be rolled out on or before March 16, 2021. We appreciate your patience until then.          

 

Regards,  

Srihari 

[Srihari Muthukaruppan]

Hi Benny, 

 

We are glad to announce that our v18.4.48 patch release is rolled out, we have added the fix for the reported scenario. And you can use the latest (v18.4.48) chart package version to get rid of the reported issue. 

 

We appreciate your patience in waiting for this release. Kindly let us know if you need further assistance. 

  

Regards, 

Srihari 

[Srihari Muthukaruppan]

Hi Benny, 

 

We are glad to announce that our v18.4.48 patch release is rolled out, we have added the fix for the reported scenario. And you can use the latest (v18.4.48) chart package version to get rid of the reported issue. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ReactUseState-402868728-1643362564.zip

 

Code Snippet: 

 

// add your additional code snippet here
<ChartComponent ref={chart}

            id="charts"

            style={{ textAlign: "center" }}

            primaryXAxis={{

              valueType: "DateTime",

              majorGridLines: { width: 0 },

              zoomFactor: 0.2,

              zoomPosition: 0.6,

              crosshairTooltip: { enable: true }

            }}

            primaryYAxis={{

              title: "Price",

              minimum: 50,

              maximum: 170,

              interval: 30,

              majorGridLines: { width: 1 },

              lineStyle: { width: 0 }

            }}

            chartArea={{ border: { width: 0 } }}

            tooltip={{

              enable: true,

              shared: true

            }}

            legendSettings={{ visible: false }}

            crosshair={{ enable: true, lineType: "Vertical" }}

            zoomSettings={{

              enableSelectionZooming: true,

              mode: "X",

              enablePan: true

            }}

            title="AAPL 2012-2017"

          >

            <Inject

              services={[

                CandleSeries,

                Category,

                Tooltip,

                DateTime,

                Zoom,

                Logarithmic,

                Crosshair,

                LineSeries,

                RangeAreaSeries,

                BollingerBands

              ]}

            />

            <SeriesCollectionDirective>

              <SeriesDirective

                dataSource={chartData}

                width={2}

                xName="x"

                yName="y"

                low="low"

                high="high"

                close="close"

                volume="volume"

                open="open"

                name="Apple Inc"

                bearFillColor="#2ecd71"

                bullFillColor="#e74c3d"

                type="Candle"

                animation={{ enable: false }}

              />

            </SeriesCollectionDirective>

            <IndicatorsDirective>

            {showBollinger ?

    <IndicatorDirective

    type="BollingerBands"

    field="Close"

    seriesName="Apple Inc"

    fill="#606eff"

    period={14}

    animation={{ enable: true }}

    upperLine={{ color: "#ffb735", width: 1 }}

    lowerLine={{ color: "#f2ec2f", width: 1 }}

  />

  : <IndicatorDirective/>}

            </IndicatorsDirective>

          </ChartComponent>

// add your additional code snippet here

 

 

 

We appreciate your patience in waiting for this release. Kindly let us know if you need further assistance. 

  

Regards, 

Srihari