Skip to content

1031413: Updated Chart playground sample #9054

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kmkrish001 merged 3 commits into from
Jun 13, 2026
Merged

1031413: Updated Chart playground sample #9054

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e5223e9
1031413: Updated Chart playground sample
ponselvajeganathan Jun 12, 2026
89e6076
1031413: updated
ponselvajeganathan Jun 12, 2026
98a181b
Merge branch 'development' into 1031413-charts
kmkrish001 Jun 13, 2026
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
2 changes: 1 addition & 1 deletion blazor/chart/advanced-accessibility-configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,4 +319,4 @@ The [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
```

Here is a preview sample demonstrating the accessibility customization support for all chart elements:
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhfXnWhVHFlrqSz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhRDHsreiUpbASQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
16 changes: 8 additions & 8 deletions blazor/chart/axis-customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ An axis can be positioned in the chart area using [CrossesAt](https://help.syncf
}

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

## Title

Expand Down Expand Up @@ -95,7 +95,7 @@ A title can be added to the axis using [Title](https://help.syncfusion.com/cr/bl
}

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

### Axis title alignment

Expand Down Expand Up @@ -139,7 +139,7 @@ The axis title's position can be aligned using the `TextAlignment` property in [
}

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

## Tick lines

Expand Down Expand Up @@ -182,7 +182,7 @@ The width, color, and size of the minor and major tick lines can be customi
}

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

## Grid lines customization

Expand Down Expand Up @@ -224,7 +224,7 @@ The width, color, and dash array of the minor and major grid lines can be c
}

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

## Multiple Axis

Expand Down Expand Up @@ -269,7 +269,7 @@ The [ChartAxes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C
}

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

## See also

Expand Down Expand Up @@ -316,7 +316,7 @@ When an axis is inversed, the greatest value on the axis moves closer to the ori
}

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

## Opposed position

Expand Down Expand Up @@ -357,7 +357,7 @@ To place an axis in the opposite position of its original position, set its [Opp
}

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

N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.

Expand Down
30 changes: 15 additions & 15 deletions blazor/chart/axis-labels.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion


```
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrUWhVxrUeUPizH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Smart Axis Label in Blazor Column Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/htBHZHMrzgSBqKay?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Hiding Smart Axis Label in Blazor Column Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp)" %}

**Case 2:** When [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_LabelIntersectAction) is set to **Rotate45**.

Expand Down Expand Up @@ -102,7 +102,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhUWrhdBKnQRxlc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVxNnCLpqoSQjrY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp)" %}

**Case 3:** When [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_LabelIntersectAction) is set to **Rotate90**.

Expand Down Expand Up @@ -144,7 +144,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVKsVhHBgQNxgcg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/htBnNdiBJAoPOXAx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp)" %}

## Axis labels positioning

Expand Down Expand Up @@ -188,7 +188,7 @@ The axis labels can be put **Outside** of the axis line by default, however the
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVACVhHLgcAIDVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Axis Label Position in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-position.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrnXdiVpgnClUcS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Axis Label Position in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-position.webp)" %}

## Multilevel labels

Expand Down Expand Up @@ -243,7 +243,7 @@ The [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/htLgMLLxrgGHhnQF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Multilevel Labels](images/axis-labels/blazor-column-chart-multi-labels.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLRtxWrJqneRbjw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Multilevel Labels](images/axis-labels/blazor-column-chart-multi-labels.webp)" %}

### Overflow

Expand Down Expand Up @@ -295,7 +295,7 @@ Using the [Overflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrAirBRVqmaLxUH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Multilevel Labels with Overflow](images/axis-labels/blazor-column-chart-axis-label-overflow.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLRXxMVTAHarkMR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart Multilevel Labels with Overflow](images/axis-labels/blazor-column-chart-axis-label-overflow.webp)" %}

### Alignment

Expand Down Expand Up @@ -347,7 +347,7 @@ The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBUWLVnrqvhmHGl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Multilevel Labels Alignment in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-alignment.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrHZHsLpUQqQGmT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Multilevel Labels Alignment in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-alignment.webp)" %}

### Text customization

Expand Down Expand Up @@ -400,7 +400,7 @@ The [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartA
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAMBrHLqPoocKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Multilevel Labels Text in Blazor Column Chart](images/axis-labels/blazor-column-chart-custom-axis-label.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBxXnMBpgcmomUl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Multilevel Labels Text in Blazor Column Chart](images/axis-labels/blazor-column-chart-custom-axis-label.webp)" %}

### Border customization

Expand Down Expand Up @@ -453,7 +453,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVKMLLxVqlbslqT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Multilevel Labels Border in Blazor Column Chart](images/axis-labels/blazor-column-chart-label-with-custom-border.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLdNnihJKFCjqNj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Multilevel Labels Border in Blazor Column Chart](images/axis-labels/blazor-column-chart-label-with-custom-border.webp)" %}

## Edge label placement

Expand Down Expand Up @@ -501,7 +501,7 @@ The longer text labels at the axes edges may only be partially visible in the c
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqWVVHhTXtqqWR?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/rNrntnsrpqbeqVsF?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)" %}

## Labels customization

Expand Down Expand Up @@ -543,7 +543,7 @@ The label [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLUCVrRhftplXww?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Custom Label](images/axis-labels/blazor-column-chart-axis-custom-label.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBnZnCBTgPPuXVx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart Axis with Custom Label](images/axis-labels/blazor-column-chart-axis-custom-label.webp)" %}

## Trim label

Expand Down Expand Up @@ -584,7 +584,7 @@ The label can be trimmed using the [EnableTrim](https://help.syncfusion.com/cr/b
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVqMrLdVzXPKHis?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Trimming in Blazor Column Chart Axis](images/axis-labels/blazor-column-chart-axis-label-trim.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrxtnChTKuBXOyK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Label Trimming in Blazor Column Chart Axis](images/axis-labels/blazor-column-chart-axis-label-trim.webp)" %}

## Line break

Expand Down Expand Up @@ -626,7 +626,7 @@ The `<br>` tag can used to separate the long axis label into multiple lines.
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLgCBLdVJBNXepm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Line break Label](images/axis-labels/blazor-column-chart-axis-line-break-label.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLdtxCBJqESmnux?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart Axis with Line break Label](images/axis-labels/blazor-column-chart-axis-line-break-label.webp)" %}

## Label format

Expand Down Expand Up @@ -706,7 +706,7 @@ You can customize the axis labels by using [OnAxisLabelRender](https://help.sync
}

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

## Axis label template

Expand Down Expand Up @@ -760,7 +760,7 @@ Within the `LabelTemplate`, the implicit parameter context provides access to la
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLHjrXgKgtAxgoC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Template using Text](images/axis-labels/blazor-column-chart-axis-text-template.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVHNHChJzjTfWZv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart Axis with Template using Text](images/axis-labels/blazor-column-chart-axis-text-template.webp)" %}

N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Chart-Axis-Label-Customization).

Expand Down
Loading