Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions blazor/accumulation-chart/accessibility.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Accessibility in Blazor Accumulation Chart Component | Syncfusion
description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Accumulation Chart component and more.
title: Accessibility in Blazor Accumulation Chart Component | Syncfusion®
description: Checkout and learn here all about Accessibility using Keyboard navigation in Blazor Accumulation Chart component and much more details.
platform: Blazor
control: Accumulation Chart
documentation: ug
Expand Down Expand Up @@ -75,4 +75,4 @@ The accessibility compliance of the Blazor Accumulation Chart component is shown

## See also

* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
* [Accessibility in Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
6 changes: 3 additions & 3 deletions blazor/accumulation-chart/adaptive-layout.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Adaptive Layout in Blazor Accumulation Chart Component | Syncfusion
description: Check out and learn how to configure and utilize the Adaptive Layout in Syncfusion Blazor Accumulation Chart component.
title: Adaptive Layout in Blazor Accumulation Chart Component | Syncfusion®
description: Check out and learn how to configure and utilize the Adaptive Layout in Blazor Accumulation Chart component and much more details.
platform: Blazor
control: Accumulation Chart
documentation: ug
---

# Adaptive Layout in Blazor Accumulation Chart Component

When viewing the accumulation chart on mobile devices, some elements may not display properly due to limited screen space. The **Syncfusion<sup style="font-size:70%">&reg;</sup> Accumulation Chart Adaptive Layout** feature dynamically adjusts chart elements for optimal display based on screen size and orientation. Enable the `EnableAdaptiveRendering` property to allow the chart to automatically adapt to container size changes, ensuring clear alignment and visibility of elements such as the legend, data labels, chart title, and more.
When viewing the accumulation chart on mobile devices, some elements may not display properly due to limited screen space. The **Accumulation Chart Adaptive Layout** feature dynamically adjusts chart elements for optimal display based on screen size and orientation. Enable the `EnableAdaptiveRendering` property to allow the chart to automatically adapt to container size changes, ensuring clear alignment and visibility of elements such as the legend, data labels, chart title, and more.

```cshtml

Expand Down
6 changes: 3 additions & 3 deletions blazor/accumulation-chart/animation.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Animation in Blazor Accumulation Chart Component | Syncfusion
description: Checkout and learn here all about Animation in Syncfusion Blazor Accumulation Chart component and more.
title: Animation in Blazor Accumulation Chart Component | Syncfusion®
description: Checkout and learn here all about Animation in Blazor Accumulation Chart component and much more details.
platform: Blazor
control: Accumulation Chart
documentation: ug
Expand Down Expand Up @@ -47,7 +47,7 @@ You can customize animation for a series using [`Animation`](https://help.syncfu

## Disable animation on programmatic refresh

You can programmatically refrsh chart using [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Refresh_System_Boolean_) method. You can enable or disable animation by passing boolean parameter to `Refresh` method.
You can programmatically refresh chart using [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Refresh_System_Boolean_) method. You can enable or disable animation by passing boolean parameter to `Refresh` method.

```cshtml
@using Syncfusion.Blazor.Charts
Expand Down
4 changes: 2 additions & 2 deletions blazor/accumulation-chart/annotation.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Annotation in Blazor Accumulation Chart Component | Syncfusion
description: Checkout and learn here all about Annotation in Syncfusion Blazor Accumulation Chart component and more.
title: Annotation in Blazor Accumulation Chart Component | Syncfusion®
description: Checkout and learn here all about Annotation in Blazor Accumulation Chart component and much more details.
platform: Blazor
control: Accumulation Chart
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/accumulation-chart/center-label.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Center Label in Blazor Pie and Donut Chart Component | Syncfusion
description: Checkout and learn here all about Center Label in Syncfusion Blazor Pie and Donut Chart component and more.
title: Center Label in Blazor Pie and Donut Chart Component | Syncfusion®
description: Checkout and learn here all about Center Label in Blazor Pie and Donut Chart component and much more details.
platform: Blazor
control: Accumulation Chart
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/accumulation-chart/chart-print.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Print and Export in Blazor Accumulation Chart Component | Syncfusion
description: Checkout and learn here all about Print and Export in Syncfusion Blazor Accumulation Chart component and more.
title: Print and Export in Blazor Accumulation Chart Component | Syncfusion®
description: Checkout and learn here all about Print and Export in Blazor Accumulation Chart component and much more details.
platform: Blazor
control: Accumulation Chart
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/accumulation-chart/chart-types/funnel.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Funnel in Blazor Accumulation Chart Component | Syncfusion
description: Checkout and learn here all about Funnel in Syncfusion Blazor Accumulation Chart component and more.
title: Funnel in Blazor Accumulation Chart Component | Syncfusion®
description: Checkout and learn here all about Funnel in Blazor Accumulation Chart component and much more details.
platform: Blazor
control: Accumulation Chart
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/accumulation-chart/chart-types/pie-doughnut.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Pie and Doughnut in Blazor Accumulation Chart Component | Syncfusion
description: Checkout and learn here all about Pie and Doughnut in Syncfusion Blazor Accumulation Chart component and more.
title: Pie and Doughnut in Blazor Accumulation Chart Component | Syncfusion®
description: Checkout and learn here all about Pie and Doughnut in Blazor Accumulation Chart component and much more details.
platform: Blazor
control: Accumulation Chart
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/accumulation-chart/chart-types/pyramid.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Pyramid in Blazor Accumulation Chart Component | Syncfusion
description: Checkout and learn here all about Pyramid in Syncfusion Blazor Accumulation Chart component and more.
title: Pyramid in Blazor Accumulation Chart Component | Syncfusion®
description: Checkout and learn here all about Pyramid in Blazor Accumulation Chart component and much more details.
platform: Blazor
control: Accumulation Chart
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/accumulation-chart/data-label.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Data Label in Blazor Accumulation Chart Component | Syncfusion
description: Checkout and learn here all about Data Label in Syncfusion Blazor Accumulation Chart component and more.
title: Data Label in Blazor Accumulation Chart Component | Syncfusion®
description: Checkout and learn here all about Data Label in Blazor Accumulation Chart component and much more details.
platform: Blazor
control: Accumulation Chart
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/accumulation-chart/empty-points.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Empty Points in Blazor Accumulation Chart Component | Syncfusion
description: Checkout and learn here all about Empty Points in Syncfusion Blazor Accumulation Chart component and more.
title: Empty Points in Blazor Accumulation Chart Component | Syncfusion®
description: Checkout and learn here all about Empty Points in Blazor Accumulation Chart component and much more details.
platform: Blazor
control: Accumulation Chart
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/accumulation-chart/events.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Events in Blazor Accumulation Chart Component | Syncfusion
description: Checkout and learn here all about Events in Syncfusion Blazor Accumulation Chart component and more.
title: Events in Blazor Accumulation Chart Component | Syncfusion®
description: Checkout and learn here all about Events in Blazor Accumulation Chart component and much more details.
platform: Blazor
control: Accumulation Chart
documentation: ug
Expand Down
26 changes: 13 additions & 13 deletions blazor/accumulation-chart/getting-started-with-server-app.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Getting Started | Blazor Accumulation Chart in Server App | Syncfusion
description: Checkout and learn about getting started with Blazor Accumulation Chart component in Blazor Server App.
title: Accumulation Chart with Blazor Server App | Syncfusion®
description: Checkout and learn about getting started with Blazor Accumulation Chart component in Blazor Server App and much more details.
platform: Blazor
control: Accumulation Chart
documentation: ug
---

# Getting Started with Blazor Accumulation Chart in Blazor Server App

This section briefly explains how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
This section briefly explains how to include [Blazor Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).

{% tabcontents %}

Expand All @@ -21,7 +21,7 @@ This section briefly explains how to include [Syncfusion<sup style="font-size:70

## Create a new Blazor App in Visual Studio

Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.

{% endtabcontent %}

Expand All @@ -33,7 +33,7 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua

## Create a new Blazor App in Visual Studio Code

Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.

Alternatively, create a Server application using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).

Expand Down Expand Up @@ -83,7 +83,7 @@ cd BlazorApp

N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
## Install required Blazor packages

Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI.

Expand Down Expand Up @@ -114,9 +114,9 @@ N> The `~/` notation represents the root directory of your project. This file is
{% endhighlight %}
{% endtabs %}

## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
## Register Blazor service

Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Server App. This step enables the Syncfusion components to work in your application.
Register the Blazor service in the **Program.cs** file of your Blazor Server App. This step enables the Syncfusion components to work in your application.

{% tabs %}
{% highlight C# tabtitle="Program.cs" %}
Expand All @@ -142,9 +142,9 @@ The Syncfusion JavaScript library needs to be included in your application. The

N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.

## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component
## Add Blazor Accumulation Chart component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
Add the Blazor Accumulation Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.

N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.

Expand Down Expand Up @@ -193,7 +193,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
{% endhighlight %}
{% endtabs %}

Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the default web browser.
Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor Accumulation Chart component in the default web browser.

{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.webp)" %}

Expand All @@ -202,5 +202,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
## See also


1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
1. [Getting Started with Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
2. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
Loading