How to Integrate a Stock Chart Inside a Blazor Accordion Component?

This article demonstrates how to dynamically render a Blazor Stock Chart within a Blazor Accordion component, ensuring the chart loads only when the corresponding accordion pane is expanded.

In the sample below, the Stock Chart is rendered inside the ContentTemplate of the accordion item using an @if condition. The chart appears only when the first pane (index 0) is expanded, which is tracked using the IsExpanded boolean flag. This flag is set to true in the Expanded event and reset to false in the Collapsed event. The chart is placed inside a div element that occupies the full width and height of the pane, and it uses candlestick series to visualize historical stock data for AAPL.

Code Example

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Navigations
<SfAccordion>
   <AccordionEvents Expanded="OnExpanded" Collapsed="OnCollapsed"></AccordionEvents>
   <AccordionItems>
       <AccordionItem Header="Stock Chart">
           <ContentTemplate>
          @if(IsExpanded){
<div style="height:100%;width:100%">
                   <SfStockChart @ref="StockChartRef" Title="AAPL Historical">
                       <StockChartSeriesCollection>
                           <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Candle" XName="Date" YName="Close" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume"></StockChartSeries>
                       </StockChartSeriesCollection>
                   </SfStockChart>
               </div>
          }
           </ContentTemplate>
       </AccordionItem>
   </AccordionItems>
</SfAccordion>
@code
{
   public Boolean IsExpanded; 
   public SfStockChart StockChartRef;

       private void OnExpanded(ExpandedEventArgs args)
       {
           if (args.Index == 0) {
               IsExpanded = true;
           } 
            
       }
         public void OnCollapsed(CollapsedEventArgs args)
         {
            if (args.Index == 0) {
                IsExpanded = false;
            }
       }
   } 

Output

When the first accordion pane is expanded, the chart appears fully stretched within the pane. When collapsed, the chart is removed from view.

Sample

Click to open sample using Blazor Playground

See Also

Blazor Accordion - Getting Started
Blazor Stock Chart - Getting Started

Conclusion

I hope you enjoyed learning about how to integrate a Stock Chart inside a Blazor Accordion Component.

You can refer to our Blazor Stock Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Blazor Stock Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our Blazor components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Blazor Chart and other Blazor components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!