Skip to main content

LineTitle properties

note

While specifying color values of the item, use the HEX format.

Usage​

const data = [
    // line title object
    {
        type: "lineTitle",
        id?: string | number,
        text: string,
        parent: string | number, 

        distance?: number, // 50 by default
        autoPosition?: boolean, // true by default
        editable?: boolean, // true by default
        fixed?: boolean, // false by default
        hidden?: boolean, // false by default

        fill?: string,
        fontSize?: string | number, // 14 by default
        lineHeight?: string | number, // 14 by default
        fontStyle?: "normal" | "italic" | "oblique", // "normal" by default
        fontColor?: string, // "#4C4C4C" by default
        fontWeight?: string, // "500" by default
        textAlign?: "center" | "left" | "right" // "center" by default
    },
    // more line objects
];

Description​

Each line title object can include the following properties:

  • type - (required) the type of the item, set it to "lineTitle"
  • id - (optional) the id of the line title, autogenerated by default
  • parent - (required) the id of the line to display the title for
  • text - (required) the text of the line title
  • distance - (optional) specifies the distance to the point of displaying the title on the line in the range from 0 to 100, 50 by default
  • autoPosition - (optional) defines the direction of the text, if set to true - the direction of the text is the same as that of the line, false - the direction of the text is always horizontal, true by default
  • editable - (optional) enables/disables the ability to edit the text of the item by double-clicking on it, true by default
  • fixed - (optional) enables/disables the ability to fix the text of the item with the specified distance value, false by default
  • hidden - (optional) defines whether the text will be hidden, false by default
  • fill - (optional) the background color of the line title item
  • fontSize - (optional) the size of the font, 14 by default
  • lineHeight - (optional) the height of the text line, 14 by default
  • fontStyle - (optional) the style of the text font: "normal" (default), "italic", "oblique"
  • fontColor - (optional) the color of the text font, "#4C4C4C" by default
  • fontWeight - (optional) the text font weight, possible values are: "normal", "bold", "bolder", "lighter"; values "100"-"900", where "400" is the same as normal, and "600"+ is the boldest font; "500" by default
  • textAlign - (optional) the alignment of the text: "center"(default), "left", "right"

Example​

const data = [
    // configuring shapes
    { type: "rectangle", id: "shape_1" },
    { type: "rectangle", id: "shape_2", x: 400 },

    // configuring lines
    { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },

    // configuring line titles
    { type: "lineTitle", id: "title_1", parent: "line_1", text: "Some text" }
];

Related articles: Configuring line titles