# Perspective - power chart - timeAxis - tick, label, format question

**URL:** <https://forum.inductiveautomation.com/t/perspective-power-chart-timeaxis-tick-label-format-question/62508>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 30, 2022, 4:04pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-timeaxis-tick-label-format-question/62508 "2022-07-30T16:04:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![falko](https://avatars.discourse-cdn.com/v4/letter/f/9de0a6/32.png) [@falko](https://forum.inductiveautomation.com/u/falko)\
**Post date:** [July 30, 2022, 4:04pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-timeaxis-tick-label-format-question/62508/1 "2022-07-30T16:04:24Z")

</div>

Hello,

I am able to change format for timeAxis, tick, label to something like this “HH:mm:ss YYYY-MM-DD”.  
But i would like to get these date in two rows: time portition (“HH:mm:ss”) in first row, and date portition (“YYYY-MM-DD”) in second row.  
for regular label, i will use html formating " HH:mm:ss   
 YYYY-MM-DD \<.html\>.  
But when i use same format for timeAxis, tick, label I still getting only one row.  
is it possible to get dateTime format for timeAxis, tick, label in two rows ?  
Thanks.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [July 30, 2022, 9:48pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-timeaxis-tick-label-format-question/62508/2 "2022-07-30T21:48:16Z")

</div>

I had a look into this but was unable to find a solution. When examined with a browser’s developer tools the chart is showing up as an SVG. According to [javascript - How to insert line break in svg \<tspan\> element? - Stack Overflow](https://stackoverflow.com/a/49067273/3934992) the way to do this is using `tspan` and a `dy` to offset the second line of text.

```auto
  <text x="0" y="0">
    <tspan x="0" dy="1em">Hello</tspan>
    <tspan x="0" dy="1em">World</tspan>
  </text>
</svg>

```

I tried modifying `props.timeAxis.tick.label.format` to

```auto
HH:mm:ss<tspan dy="10">YYYY-M-D</tspan>

```

but when inspected in the browser’s HTML it showed up as

```auto
22:35:26<t26ppmn 6y="10">2022-7-30</t26ppmn>

```

I have no idea why `tspan` becomes `t26ppmn`.

I also tried various options of style for `white-space` but I don’t think these would affect an SVG element.

* * *

Tip: enclose bits of code in ` backticks and blocks of code using the \</\> button. It will make it stand out, preserve indents and apply syntax highlighting as shown above.