Multiple Languages

Styling

See how KeyLines automatically supports international languages.

View live example →

By default, KeyLines supports multiple international languages and writing systems including right-to-left (RTL) and bidirectional (BIDI).

When RTL characters are detected, KeyLines automatically applies RTL auto support to correctly display any RTL and BIDI content.

This demo showcases the RTL auto support on a sample of names from Japan, Israel, Saudi Arabia, China and South Korea. Each node label displays:

The given name in the native language of that country, which is either RTL or LTR.
The given name translated into LTR English. For the Israeli and Saudi Arabian networks, this shows how you can use BIDI text in the same label.

Code

import KeyLines from "keylines";
import { data } from "./data.js";

let chart;

async function klReady() {
  chart.load(data);
  chart.zoom("fit");
}

async function startKeyLines() {
  chart = await KeyLines.create({
    container: "klchart",
    type: "chart",
    options: {
      logo: { u: "/images/Logo.png" },
      handMode: true,
    },
  });
  klReady();
}

document.addEventListener("DOMContentLoaded", startKeyLines);

Data

export const data = {
  type: "LinkChart",
  items: [
    {
      type: "node",
      id: "node5",
      t: "민준\nMin-jun",
      x: -585.4736092775761,
      y: -488.70260259325715,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(96,128,255,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node6",
      t: "서준\nSeo-jun",
      x: -412.0194305792724,
      y: -662.156781291561,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(96,128,255,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node7",
      t: "하준\nHa-joon",
      x: -379.37692213316353,
      y: -456.06009414714833,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(96,128,255,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node8",
      t: "도윤\nDo-yun",
      x: -343.1924227779332,
      y: -527.0761727181678,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(96,128,255,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node9",
      t: "주원\nJoo-won",
      x: -355.6607515262913,
      y: -605.7981022385798,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(96,128,255,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node10",
      t: "서윤\nSeo-yun",
      x: -529.114930224595,
      y: -432.3439235402761,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(96,128,255,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node11",
      t: "서연\nSeo-yeon",
      x: -450.3930007041829,
      y: -419.87559479191805,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(96,128,255,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node12",
      t: "지우\nJi-woo",
      x: -597.9419380259342,
      y: -567.4245321136692,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(96,128,255,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node13",
      t: "지유\nJi-yoo",
      x: -490.74136009968447,
      y: -674.6251100399189,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(96,128,255,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node14",
      t: "하윤\nHa-yoon",
      x: -561.7574386707038,
      y: -638.4406106846886,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(96,128,255,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node15",
      t: "Noam\nנעם",
      x: -413.0465889161247,
      y: -183.0727210692921,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,255,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node16",
      t: "Ori\nאורי",
      x: -449.5827505267669,
      y: 47.60752464031262,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,255,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node17",
      t: "David\nדוד",
      x: -555.6148212978375,
      y: -160.492131375456,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,255,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node18",
      t: "Yosef\nיוסף",
      x: -487.9991442790216,
      y: -194.9440396013383,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,255,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node19",
      t: "Eitan\nאיתן",
      x: -347.5151652820688,
      y: -54.46006060438552,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,255,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node20",
      t: "Noa\nנועה",
      x: -359.3864838141151,
      y: -129.41261596728245,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,255,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node21",
      t: "Tamar\nתמר",
      x: -524.5353058896638,
      y: 35.73620610826637,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,255,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node22",
      t: "Shira\nשירה",
      x: -578.1954109916735,
      y: -17.923898993743222,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,255,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node23",
      t: "Maya\nמאיה",
      x: -590.0667295237197,
      y: -92.87645435664015,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,255,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node24",
      t: "Yael\nיעל",
      x: -381.96707350795106,
      y: 13.15561641443037,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,255,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node25",
      t: "Mohammad\nمحمد",
      x: 4.815101004718429,
      y: -639.3422499226049,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,32,196,0.3)",
      e: 1.2,
      fs: 9,
    },
    {
      type: "node",
      id: "node26",
      t: "Fahd\nفهد‎‎",
      x: 75.83117957573782,
      y: -675.5267492778353,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,32,196,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node27",
      t: "Abdullah\nعبد الله",
      x: 223.38011689748907,
      y: -527.977811956084,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,32,196,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node28",
      t: "Abdulrahman\nعبد الرحمن",
      x: 154.5531090961499,
      y: -663.0584205294772,
      fs: 8,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,32,196,0.3)",
      e: 1.2,
    },
    {
      type: "node",
      id: "node29",
      t: "Turki\nتركي‎‎",
      x: 116.17953897123937,
      y: -423.9256106826012,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,32,196,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node30",
      t: "Fatima\nفاطمة",
      x: 210.91178814913098,
      y: -606.699741476496,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,32,196,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node31",
      t: "Aisha\nعائشة",
      x: -18.90106960215377,
      y: -489.60424183117345,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,32,196,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node32",
      t: "Nora\nنور‎‎",
      x: 187.1956175422588,
      y: -456.96173338506463,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,32,196,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node33",
      t: "Hessa\nهسة",
      x: 37.457609450827306,
      y: -433.2455627781924,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,32,196,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node34",
      t: "Sheikha\nشيخة‎",
      x: -31.369398350511858,
      y: -568.3261713515856,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(128,32,196,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node35",
      t: "一雄\nKazuo",
      x: -272.77072452377973,
      y: -394.8137424932173,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(255,128,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node36",
      t: "健治\nKenji",
      x: -242.11201493351174,
      y: -201.2422683796807,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(255,128,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node37",
      t: "春人\nHaruto",
      x: -295.0455808948752,
      y: -254.17583434104415,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(255,128,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node38",
      t: "明\nAkira",
      x: -101.47410678133855,
      y: -223.5171247507762,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(255,128,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node39",
      t: "暁美\nAkemi",
      x: -79.19925041024311,
      y: -364.1550329029494,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(255,128,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node40",
      t: "菖蒲\nAyame",
      x: -168.17429107456118,
      y: -189.5316833674107,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(255,128,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node41",
      t: "恵美\nEmi",
      x: -306.7561659071452,
      y: -328.1135581999947,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(255,128,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node42",
      t: "美恵子\nMieko",
      x: -132.13281637160657,
      y: -417.0885988643128,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(255,128,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node43",
      t: "美樹\nMiki",
      x: -204.45258580072772,
      y: -423.94532058709456,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(255,128,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node44",
      t: "里菜\nRina",
      x: -67.48866539797308,
      y: -290.21730904399885,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "rgba(255,128,96,0.3)",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node45",
      t: "伟\nWei",
      x: 17.905599371634196,
      y: -162.43431578579515,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "#B5EAD7",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node46",
      t: "杰\nJie",
      x: 48.564308961902185,
      y: 31.137158327741474,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "#B5EAD7",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node47",
      t: "郝\nHao",
      x: -4.369256999461243,
      y: -21.796407633621982,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "#B5EAD7",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node48",
      t: "意\nYi",
      x: 189.20221711407538,
      y: 8.862301956645979,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "#B5EAD7",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node49",
      t: "君\nJun",
      x: 211.47707348517082,
      y: -131.77560619552722,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "#B5EAD7",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node50",
      t: "静\nJing",
      x: 122.50203282085272,
      y: 42.847743340011476,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "#B5EAD7",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node51",
      t: "营\nYing",
      x: -16.079842011731273,
      y: -95.73413149257254,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "#B5EAD7",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node52",
      t: "艳\nYan",
      x: 158.54350752380736,
      y: -184.70917215689065,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "#B5EAD7",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node53",
      t: "理\nLi",
      x: 84.6057836648568,
      y: -196.41975716916062,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "#B5EAD7",
      e: 1.2,
      fs: 11,
    },
    {
      type: "node",
      id: "node54",
      t: "晓燕\nXiaoyan",
      x: 223.18765849744085,
      y: -57.837882336576655,
      fb: false,
      fbc: "transparent",
      fc: "black",
      c: "#B5EAD7",
      e: 1.2,
      fs: 11,
    },
    {
      id: "chinese",
      t: "China",
      type: "node",
      fc: "rgb(96,128,220)",
      fs: 26,
      x: 96.67338322553144,
      y: -258.96545020013417,
    },
    {
      id: "korean",
      t: "South Korea",
      type: "node",
      fc: "rgb(96,128,220)",
      x: -488.962914337488,
      y: -729.2418766340576,
      fs: 26,
    },
    {
      id: "hebrew",
      t: "Israel",
      type: "node",
      fc: "rgb(96,128,220)",
      fs: 26,
      x: -489.11555876558225,
      y: -255.86988414271673,
    },
    {
      id: "japanese",
      t: "Japan",
      type: "node",
      fc: "rgb(96,128,220)",
      fs: 26,
      x: -193.35820228821308,
      y: -487.5008806553019,
    },
    {
      id: "arabic",
      t: "Saudi Arabia",
      type: "node",
      fc: "rgb(96,128,220)",
      fs: 26,
      x: 78.16508134445075,
      y: -729.7020851132238,
    },
  ],
  combos: {
    nodes: [],
    links: [],
  },
  reveal: [],
  viewSettings: {
    width: 899,
    height: 652,
    zoom: 0.48491545943040765,
    offsetX: 761.1266555200409,
    offsetY: 563.3795497050585,
  },
};

HTML

<!doctype html>
<html lang="en" style="background-color: #2d383f">
  <head>
    <meta charset="utf-8" />
    <title>Multiple Languages</title>
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/keylines.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/minimalsdk.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/sdk-layout.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/demo.css" />
  </head>
  <body>
    <div id="klchart" class="klchart"></div>
    <script type="text/javascript">
      window.addEventListener("load", function () {
        document.querySelector('[name="controlsTab"]').remove();
        document.querySelector('[name="aboutTab"]').classList.add("active");
        document.getElementById("controlsTab").classList.remove("is-visible");
        document.getElementById("aboutTab").classList.add("is-visible");
      });
    </script>
    <script type="module" src="./code.js"></script>
  </body>
</html>

Search

Multiple Languages

Terms of use