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

Ignition
1

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.

2

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 the way to do this is using tspan and a dy to offset the second line of text.

  <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

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

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

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.