Skip to content
Open
40 changes: 10 additions & 30 deletions blazor/3D-chart/appearance.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +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" %}

![Blazor Column 3D Chart with Custom Color Palette](images/appearance/blazor-column-chart-custom-color-palette.png)
{% 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.png)" %}

<!-- markdownlint-disable MD036 -->

Expand Down Expand Up @@ -100,9 +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" %}

![Blazor Column 3D Chart with PointColorMapping](images/appearance/blazor-column-chart-with-point-color.png)
{% 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.png)" %}

## Point level customization

Expand Down Expand Up @@ -164,9 +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" %}

![Blazor Column 3D Chart with Point level customization](images/appearance/blazor-column-chart-point-level-customization.png)
{% 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.png)" %}

## Chart area customization

Expand Down Expand Up @@ -212,9 +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" %}

![Blazor Column 3D Chart with Custom Background and Border](images/appearance/blazor-column-chart-custom-background-and-border.png)
{% 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.png)" %}

**Chart margin**

Expand Down Expand Up @@ -257,9 +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" %}

![Blazor Column 3D Chart with Custom Margin](images/appearance/blazor-column-chart-custom-margin.png)
{% 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.png)" %}

## Animation

Expand Down Expand Up @@ -387,9 +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" %}

![Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title.png)
{% 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.png)" %}

### Title position

Expand Down Expand Up @@ -431,9 +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" %}

![Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title-position.png)
{% 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.png)" %}

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

Expand Down Expand Up @@ -473,9 +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" %}

![Blazor Column 3D Chart with Custom Title](images/appearance/blazor-column-chart-title-custom.png)
{% 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.png)" %}

## Title alignment

Expand Down Expand Up @@ -517,9 +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" %}

![Blazor Column 3D Chart Title with Text Alignment](images/appearance/blazor-column-chart-title-alignment.png)
{% 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.png)" %}

### Title customization

Expand Down Expand Up @@ -562,9 +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" %}

![Blazor Column 3D Chart Title with Customization](images/appearance/blazor-column-chart-title-with-customization.png)
{% 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.png)" %}

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.

28 changes: 7 additions & 21 deletions blazor/3D-chart/axis-customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +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" %}

![Blazor Column 3D Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.png)
{% 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.png)" %}

## Title rotation

Expand Down Expand Up @@ -94,9 +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" %}

![Blazor Column 3D Chart with Axis Title Rotation](images/axis-customization/blazor-column-chart-axis-title-rotation.png)
{% 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.png)" %}

## Tick lines customization

Expand Down Expand Up @@ -137,9 +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" %}

![Blazor Column 3D Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.png)
{% 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.png)" %}

## Grid lines customization

Expand Down Expand Up @@ -180,9 +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" %}

![Blazor Column 3D Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.png)
{% 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.png)" %}

## Multiple Axis

Expand Down Expand Up @@ -226,9 +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" %}

![Blazor 3D Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.png)
{% 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.png)" %}

## Inversed Axis

Expand Down Expand Up @@ -269,9 +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" %}

![Blazor Column 3D Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.png)
{% 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.png)" %}

## Opposed position

Expand Down Expand Up @@ -311,7 +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" %}

![Blazor Column 3D Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.png)
{% 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.png)" %}

16 changes: 4 additions & 12 deletions blazor/3D-chart/axis-labels.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +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" %}

![Hiding Smart Axis Label in Blazor Column 3D Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.png)
{% 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.png)" %}

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

Expand Down Expand Up @@ -98,9 +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" %}

![Blazor Column 3D Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png)
{% 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.png)" %}

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

Expand Down Expand Up @@ -141,9 +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" %}

![Blazor Column 3D Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png)
{% 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.png)" %}

## Edge label placement

Expand Down Expand Up @@ -185,9 +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" %}

![Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.png)
{% 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.png)" %}

## Maximum labels

Expand Down
16 changes: 4 additions & 12 deletions blazor/3D-chart/category-axis.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,7 @@ The category axis is the horizontal axis of a 3D chart that shows text values ra
}

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

![Blazor Column 3D Chart with Default Axis](images/category-axis/blazor-chart-default-axis.png)
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTZdMLTMTKyfTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Default Axis](images/category-axis/blazor-chart-default-axis.png)" %}

## Labels placement

Expand Down Expand Up @@ -89,9 +87,7 @@ By default, category axis labels are placed between ticks in an axis. It can als
}

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

![Changing Labels Position in Blazor 3D Chart](images/category-axis/blazor-diagram-label-position.png)
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJjHsLTWRHhqRc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Labels Position in Blazor 3D Chart](images/category-axis/blazor-diagram-label-position.png)" %}

## Range

Expand Down Expand Up @@ -132,9 +128,7 @@ The range of the category axis can be customized using `Minimum`, `Maximum`, and
}

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

![Changing Blazor Column 3D Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.png)
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNxMLficgvSbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.png)" %}

## Indexed category axis

Expand Down Expand Up @@ -182,6 +176,4 @@ The category axis can also be rendered based on the index values of the data sou
}

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

![Blazor 3D Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.png)
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBTjniVJWQPizAl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.png)" %}
12 changes: 3 additions & 9 deletions blazor/3D-chart/chart-dimensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,7 @@ The 3D chart can be rendered to its container size and it can be set via inline
}

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

![Changing Blazor 3D Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.png)
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrJtdsrpsPezXYL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.png)" %}

## Size for chart

Expand Down Expand Up @@ -95,9 +93,7 @@ The size of the 3D chart can be set in pixel as demonstrated below.
}

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

![Changing Blazor 3D Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.png)
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLTZdCrpWvYfGmi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.png)" %}

### In Percentage

Expand Down Expand Up @@ -137,6 +133,4 @@ By setting the value in percentage, the 3D Chart gets its dimension with respec
}

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

![Changing Blazor 3D Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.png)
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVJDxMrpsargarf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.png)" %}
Loading