Search code examples
lightningchart

How to Display Vertical Text in LightningChartJS

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:

enter image description here

Could someone guide me on how to modify this to display the text vertically?

I really appreciate any help you can provide.

Solution

  • as visible in this image enter image description here

    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