# Rz-series-data-label

**URL:** <https://forum.radzen.com/t/rz-series-data-label/20079>\
**Category:** Radzen.Blazor Components\
**Created:** [April 4, 2025, 9:50am UTC](https://forum.radzen.com/t/rz-series-data-label/20079 "2025-04-04T09:50:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Roberto\_Daniele](https://forum.radzen.com/user_avatar/forum.radzen.com/roberto_daniele/32/14945_2.png) [@Roberto\_Daniele](https://forum.radzen.com/u/Roberto_Daniele)\
**Post date:** [April 4, 2025, 9:50am UTC](https://forum.radzen.com/t/rz-series-data-label/20079/1 "2025-04-04T09:50:56Z")

</div>

Good morning,  
I'd like to know if is possible to move the values labels on the top of the bar as in the image and to change css of font-size (set small) and color of text (set black).  
Tks very much and a good journey 😉  
Roberto

 ![image](https://forum.radzen.com/uploads/default/original/3X/b/6/b6fb4420d892f8df333860285dc1f5709958bd29.png)

---

<div class="post-metadata">

**Author:** ![yordanov](https://forum.radzen.com/user_avatar/forum.radzen.com/yordanov/32/8020_2.png) [@yordanov](https://forum.radzen.com/u/yordanov)\
**Post date:** [April 4, 2025, 1:54pm UTC](https://forum.radzen.com/t/rz-series-data-label/20079/2 "2025-04-04T13:54:47Z")

</div>

Hi @Roberto_Daniele,

The labels cannot be positioned at the top since this is a Stacked column chart with multiple data series. The labels however appear on top in single data series charts.

To change the apearance you can add the following styles:

```auto
<style>
    .rz-series-data-label {
        fill: black; 
        font-size: 12px; 
    }
</style>

```

---

<div class="post-metadata">

**Author:** ![Roberto\_Daniele](https://forum.radzen.com/user_avatar/forum.radzen.com/roberto_daniele/32/14945_2.png) [@Roberto\_Daniele](https://forum.radzen.com/u/Roberto_Daniele)\
**Post date:** [April 4, 2025, 2:40pm UTC](https://forum.radzen.com/t/rz-series-data-label/20079/3 "2025-04-04T14:40:53Z")

</div>

> [@yordanov](#):
>
> ```auto
> rz-series-data-label {
> fill: black; 
> font-size: 12px; 
> }
> 
> ```

Ok. Tks. And (more important for me for a better reading) is possible to rotate (90 degrees) the value on the top of each bar? (as in the image attached). I tried to insert "transform: 90deg" into css class but the displacement it's as if it concerned an area larger than the writing, ending up practically under everything.  
Tks very much.

 ![image](https://forum.radzen.com/uploads/default/original/3X/7/a/7a9636f697eeacf430137e35a07560eda0f2f4b6.png)

---

<div class="post-metadata">

**Author:** ![yordanov](https://forum.radzen.com/user_avatar/forum.radzen.com/yordanov/32/8020_2.png) [@yordanov](https://forum.radzen.com/u/yordanov)\
**Post date:** [April 4, 2025, 3:12pm UTC](https://forum.radzen.com/t/rz-series-data-label/20079/4 "2025-04-04T15:12:19Z")

</div>

You can combine `OffsetY="50"` property to `RadzenSeriesDataLabels` with  
CSS `writing-mode` and `text-orientation`.

```auto
<style>
    .rz-series-data-label {
        fill: black;
        font-size: 12px;
        writing-mode: vertical-rl;
        text-orientation: upright;
        letter-spacing: -2px;
    }
</style>

```

---

<div class="post-metadata">

**Author:** ![Roberto\_Daniele](https://forum.radzen.com/user_avatar/forum.radzen.com/roberto_daniele/32/14945_2.png) [@Roberto\_Daniele](https://forum.radzen.com/u/Roberto_Daniele)\
**Post date:** [April 5, 2025, 3:58pm UTC](https://forum.radzen.com/t/rz-series-data-label/20079/5 "2025-04-05T15:58:54Z")

</div>

Ok I will try on Monday. Tks very much

---

<div class="post-metadata">

**Author:** ![Roberto\_Daniele](https://forum.radzen.com/user_avatar/forum.radzen.com/roberto_daniele/32/14945_2.png) [@Roberto\_Daniele](https://forum.radzen.com/u/Roberto_Daniele)\
**Post date:** [April 7, 2025, 1:06pm UTC](https://forum.radzen.com/t/rz-series-data-label/20079/6 "2025-04-07T13:06:46Z")

</div>

Perfect. It's work! Tks very much again and a good journey 😉