Skip to content
Open
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
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
8 changes: 4 additions & 4 deletions chart-sdk/blazor/3d-charts/accessibility.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Accessibility in Blazor 3D Chart Component | Syncfusion®
description: Checkout and learn here all about Accessibility using Keyboard navigation in Blazor 3D Chart component and more.
platform: chart-sdk
title: Blazor 3D Chart Accessibility Examples | Syncfusion®
description: Learn about accessibility in Syncfusion Blazor 3D Chart, including keyboard navigation, screen reader support, and WCAG 2.2 compliance.
platform: Blazor
control: 3D Chart
documentation: ug
---

# Accessibility in Blazor 3D Chart Component
# Blazor 3D Chart Accessibility

The Blazor 3D Chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.

Expand Down
32 changes: 16 additions & 16 deletions chart-sdk/blazor/3d-charts/appearance.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Appearance in Blazor 3D Chart Component | Syncfusion®
description: Checkout and learn here all about Appearance Customization in Blazor 3D Chart component and much more.
platform: chart-sdk
title: Blazor 3D Chart Appearance Examples | Syncfusion®
description: Learn how to customize the appearance of Syncfusion Blazor 3D Chart, including custom color palettes via the Palettes property.
platform: Blazor
control: 3D Chart
documentation: ug
---

# Appearance in Blazor 3D Chart Component
# Blazor 3D Chart Appearance

## Custom color palette

Expand Down Expand Up @@ -56,7 +56,7 @@ The default color of series or points can be customized by providing a custom co
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVfXxCBqRuWmxlT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Color Palette](images/appearance/blazor-column-chart-custom-color-palette.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBdtxMNTSzMfApw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom Color Palette](images/appearance/blazor-column-chart-custom-color-palette.webp)" %}

<!-- markdownlint-disable MD036 -->

Expand Down Expand Up @@ -98,7 +98,7 @@ The color for the points can be bound from the `DataSource` for the series by ut
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrfDxMrKwXpXlgX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with PointColorMapping](images/appearance/blazor-column-chart-with-point-color.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVRtHsZJeTeIqES?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with PointColorMapping](images/appearance/blazor-column-chart-with-point-color.webp)" %}

## Point level customization

Expand Down Expand Up @@ -160,7 +160,7 @@ The data label and fill color of each data point can be customized using the `Po
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzXdsrUGMqoJpK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Point level customization](images/appearance/blazor-column-chart-point-level-customization.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVnZxsNpIeNhVQX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Point level customization](images/appearance/blazor-column-chart-point-level-customization.webp)" %}

## Chart area customization

Expand Down Expand Up @@ -206,7 +206,7 @@ The background color and border of the 3D chart can be customized using the `Bac
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptRCLgGMkWnGY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Background and Border](images/appearance/blazor-column-chart-custom-background-and-border.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrxjdCtpSopldxA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom Background and Border](images/appearance/blazor-column-chart-custom-background-and-border.webp)" %}

**Chart margin**

Expand Down Expand Up @@ -249,7 +249,7 @@ The 3D chart's margin can be set from its container using the `Chart3DMargin` pr
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/htLftnshAmBJsYEA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Margin](images/appearance/blazor-column-chart-custom-margin.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrxjHijToyYrTID?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom Margin](images/appearance/blazor-column-chart-custom-margin.webp)" %}

## Animation

Expand Down Expand Up @@ -293,7 +293,7 @@ To customize the animation for a particular series, the `Chart3DAnimation` prope
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrpjRsrAmhveiAm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLRjRMNTyRULUVb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}

## Chart rotation

Expand Down Expand Up @@ -335,7 +335,7 @@ The 3D chart can be rotated by using the `EnableRotation` property.
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVzNHWLKwqqyvoo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVxtnWtzSRbioyx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}

## Title

Expand Down Expand Up @@ -377,7 +377,7 @@ The 3D chart can be given a title by using `Title` property, to show the informa
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrJZRihUwKPsGvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrRtnWZJycrhOFs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title.webp)" %}

### Title position

Expand Down Expand Up @@ -419,7 +419,7 @@ By using the `Position`property in `TitleStyle`, the `Title` can be positioned
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDnsBKczVydKx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title-position.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLRXnWNTevXreFm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title-position.webp)" %}

The custom option is used to position the title anywhere in the 3D chart using `X` and `Y` coordinates.

Expand Down Expand Up @@ -459,7 +459,7 @@ The custom option is used to position the title anywhere in the 3D chart using `
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBftnWBgwTPesmR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Title](images/appearance/blazor-column-chart-title-custom.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBxNdiZfIlJVRkc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom Title](images/appearance/blazor-column-chart-title-custom.webp)" %}

## Title alignment

Expand Down Expand Up @@ -501,7 +501,7 @@ The title can be aligned to the near, far, or center of the 3D chart by using th
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVzXdiBKwdsnLib?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Title with Text Alignment](images/appearance/blazor-column-chart-title-alignment.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrdtHMDzelPOdwY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart Title with Text Alignment](images/appearance/blazor-column-chart-title-alignment.webp)" %}

### Title customization

Expand Down Expand Up @@ -544,7 +544,7 @@ The `TitleStyle` property of the 3D chart provides options to customize the titl
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzDHirqQwNwVvM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Title with Customization](images/appearance/blazor-column-chart-title-with-customization.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/htBxjnCtfIaGfGOy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart Title with Customization](images/appearance/blazor-column-chart-title-with-customization.webp)" %}

N> The chart components do not use any CSS style for customization; chart elements like axis labels, datalabel, background, series palette, legend text, and tooltip text can be customized by using the `Chart3DAxisLabelStyle`, `Chart3DDataLabelFont`, `BackGround`, `Palettes`, `Chart3DLegendTextStyle`, and `Chart3DTooltipTextStyle`, respectively.

22 changes: 11 additions & 11 deletions chart-sdk/blazor/3d-charts/axis-customization.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Axis Customization in Blazor 3D Chart Component | Syncfusion®
description: Checkout and learn here all features about Axis Customization in Blazor 3D Chart component and more.
platform: chart-sdk
title: Blazor 3D Chart Axis Customization Examples | Syncfusion®
description: Learn how to customize axes in Syncfusion Blazor 3D Chart, including Title, Chart3DAxisTitleStyle, and axis label styling options.
platform: Blazor
control: 3D Chart
documentation: ug
---

# Axis Customization in Blazor 3D Chart Component
# Blazor 3D Chart Axis Customization

## Title

Expand Down Expand Up @@ -50,7 +50,7 @@ The title for the axis can be added by using the `Title` property. It helps to p
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhJDdChpXSmCYrG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBHjHsNTBwpVxoz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.webp)" %}

## Title rotation

Expand Down Expand Up @@ -92,7 +92,7 @@ The title can be rotated from 0 to 360 degree by using the `TitleRotationAngle`
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJXdWBfZniAVZI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Axis Title Rotation](images/axis-customization/blazor-column-chart-axis-title-rotation.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBnjnWjTVcvWhUS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Axis Title Rotation](images/axis-customization/blazor-column-chart-axis-title-rotation.webp)" %}

## Tick lines customization

Expand Down Expand Up @@ -133,7 +133,7 @@ The width, color, and height of the minor and major tick lines can be custo
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJtxChftnfOPTu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrHZRMXzhFMFPDj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.webp)" %}

## Grid lines customization

Expand Down Expand Up @@ -174,7 +174,7 @@ The width and color of the minor and major grid lines can be customized by usin
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhzjxWLJXbLjntW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVntnitprbxCpxO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.webp)" %}

## Multiple Axis

Expand Down Expand Up @@ -218,7 +218,7 @@ In addition to primary X and Y axis, n number of axis can be added to the chart.
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDxirztleaKrC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrHZHsXfBbYmSwR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.webp)" %}

## Inversed Axis

Expand Down Expand Up @@ -259,7 +259,7 @@ When an axis is inversed, highest value of the axis comes closer to origin and v
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrJjxWLpXlYDizR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVnNdijzADjVRaA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.webp)" %}

## Opposed position

Expand Down Expand Up @@ -299,5 +299,5 @@ To place an axis opposite from its original position, set the `OpposedPosition`
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBzZHWhJZuVFHfl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVxXnCtJAjpMKUs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp)" %}

18 changes: 9 additions & 9 deletions chart-sdk/blazor/3d-charts/axis-labels.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Axis Labels in Blazor 3D Chart Component Syncfusion®
description: Checkout and learn here all features about the Axis Labels in Blazor 3D Chart component and much more.
platform: chart-sdk
title: Blazor 3D Chart Axis Labels Examples | Syncfusion®
description: Learn how to configure and customize axis labels in Syncfusion Blazor 3D Chart, including smart label placement via LabelIntersectAction.
platform: Blazor
control: 3D Chart
documentation: ug
---

# Axis Labels in Blazor 3D Chart Component
# Blazor 3D Chart Axis Labels

Axis labels are the labels that are positioned adjacent to the y-axis and beneath the x-axis. It provides descriptive information about the axis.

Expand Down Expand Up @@ -55,7 +55,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTDnMVpitELVMq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Smart Axis Label in Blazor Column 3D Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BthnjRitpLpkRryH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Hiding Smart Axis Label in Blazor Column 3D Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp)" %}

**Case 2:** When setting `LabelIntersectAction` as **Rotate45**.

Expand Down Expand Up @@ -96,7 +96,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i
}
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLptnWBJMsfXNjH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLdDxWjTheoBPQD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp)" %}

**Case 3:** When setting `LabelIntersectAction` as **Rotate90**.

Expand Down Expand Up @@ -137,7 +137,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i
}
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBJjnsLJMrjzDrD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLxDRMjTrSYnNcK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp)" %}

## Edge label placement

Expand Down Expand Up @@ -179,7 +179,7 @@ use the `EdgeLabelPlacement` property in axis, which moves the label inside t
}
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpDnsLTsLcphWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrxNHCjprRqvFFI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.webp)" %}

## Maximum labels

Expand Down Expand Up @@ -240,4 +240,4 @@ The labels will be rendered based on the count in the `MaximumLabels` property p
}
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/htBJNxCrTWKrGBCU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrHNHsjzhxlNbDK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
Loading