I am working with LightningChartJS and need to display text vertically rather than horizontally. Below is the snippet I've used to display text horizontally, which is based on the documentation.
import "./styles.css";
import { useEffect } from "react";
import { lightningChart , UIElementBuilders, UIOrigins} from "@arction/lcjs";
export default function App() {
useEffect(() => {
const lc = lightningChart()
const chart = lc.ChartXY({container: "chart"});
// Example, position UI in axis coordinates
const axisX = chart.getDefaultAxisX()
const axisY = chart.getDefaultAxisY()
const textBox = chart.addUIElement(UIElementBuilders.TextBox, { x: axisX, y: axisY })
.setPosition({ x: 5, y: 5 }).setText("Hello, World!")
.setOrigin(UIOrigins.LeftBottom)
})
return (
<div style={{ width: "500px", height: "500px" }} className="chart" id="chart">
</div>
);
}
Currently, the text "Hello, World!" is displayed horizontally as shown in this image:
Could someone guide me on how to modify this to display the text vertically?
I really appreciate any help you can provide.
now it is vertical
this is the code:
const textBox = chart.addUIElement(UIElementBuilders.TextBox, { x: axisX, y: axisY })
.setPosition({ x: 5, y: 5 }).setText("Hello, World!")
.setOrigin(UIOrigins.LeftBottom).setTextRotation(90)
by using .setTextRotation(90)
as Luke suggested in the comments