Search

Export

Export

Export charts in high resolution and multiple formats.

Export
View live example →

Click on the buttons above the chart to select a format and download an exported image of the Chart element.

Set the extents to export either the current view or the whole chart.

export is a chart instance method, and does not affect the ReGraph state.

See also

import React, { useRef, useState } from "react";
import { createRoot } from "react-dom/client";

import { Chart } from "regraph";

import { items } from "./data";

import "regraph/export";
import "@ci/theme/rg/css/layout.css";
import "@fortawesome/fontawesome-free/css/fontawesome.css";
import "@fortawesome/fontawesome-free/css/solid.css";

function ExportDemo() {
  const chartRef = useRef(null);

  return (
    <div className="story">
      <ExportControls chartRef={chartRef} />
      <div className="chart-wrapper">
        <Chart
          ref={chartRef}
          layout={{ tightness: 4 }}
          items={items}
          options={{
            fit: {
              N204: true,
              N205: true,
              N220: true,
              N206: true,
              N209: true,
              N215: true,
            },
            imageAlignment: { "fas fa-user": { size: 0.8, dy: -5 } },
            iconFontFamily: "Font Awesome 5 Free",
          }}
        />
      </div>
    </div>
  );
}

function ExportControls({ chartRef }) {
  const [format, setFormat] = useState("png");
  const [resolution, setResolution] = useState(4000);
  const [extents, setExtents] = useState("view");

  const pngFormat = format === "png";
  const svgFormat = format === "svg";
  const pdfFormat = format === "pdf";

  const fetchAndDownloadImage = () => {
    const options = { type: format, extents };
    if (pngFormat) {
      options.fitTo = { width: resolution, height: resolution };
    } else if (svgFormat) {
      options.fitTo = { width: window.innerWidth };
    } else if (pdfFormat) {
      options.fitTo = "page";
      // Note: margins are specified in points, with 72 points per inch
      options.doc = { layout: "landscape", margin: 0.5 * 72 };
    }
    if (chartRef.current) {
      chartRef.current
        .export(options)
        .then((image) => {
          image.download("ReGraph_export");
        })
        .catch((err) => {
          console.error("Regraph Export:", err.message);
        });
    }
  };

  return (
    <div
      className="options overlay"
      style={{ flexBasis: "auto", minWidth: 400, flexWrap: "nowrap" }}
    >
      <div
        className="options__group"
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "start",
        }}
      >
        <div className="options__group__subgroup">
          <span
            style={{ display: "inline-block", width: 80 }}
            className="label"
          >
            Format
          </span>
          <button
            type="button"
            style={{ margin: "3px 6px" }}
            className={pngFormat ? "active" : ""}
            onClick={() => {
              setFormat("png");
            }}
          >
            PNG
          </button>
          <button
            type="button"
            style={{ margin: "3px 6px" }}
            className={format === "svg" ? "active" : ""}
            onClick={() => {
              setFormat("svg");
            }}
          >
            SVG
          </button>
          <button
            type="button"
            style={{ margin: "3px 6px" }}
            className={format === "pdf" ? "active" : ""}
            onClick={() => {
              setFormat("pdf");
            }}
          >
            PDF
          </button>
        </div>
        <div className="options__group__subgroup">
          <span
            style={{ display: "inline-block", width: 80 }}
            className="label"
          >
            Extents
          </span>
          <button
            type="button"
            style={{ margin: "3px 6px" }}
            className={extents === "view" ? "active" : ""}
            onClick={() => {
              setExtents("view");
            }}
          >
            View
          </button>
          <button
            type="button"
            style={{ margin: "3px 6px" }}
            className={extents === "chart" ? "active" : ""}
            onClick={() => {
              setExtents("chart");
            }}
          >
            Chart
          </button>
        </div>
        <div
          className="options__group__subgroup"
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <span
            style={{
              display: "inline-block",
              width: 80,
              color: pngFormat ? "#555" : "#CCC",
            }}
            className="label"
          >
            Resolution
          </span>
          <div
            className="slider"
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <input
              type="range"
              min="1000"
              max="5000"
              step="500"
              defaultValue={resolution}
              style={{ boxShadow: "none" }}
              disabled={pngFormat}
              onChange={(event) =>
                setResolution(parseInt(event.target.value, 10))
              }
            />
            <span
              style={{
                minWidth: "26px",
                marginLeft: "5px",
                color: pngFormat ? "#555" : "#CCC",
              }}
            >
              {Number(resolution / 1000).toFixed(1)}k
            </span>
          </div>
        </div>
      </div>

      <span
        className="separator"
        style={{ minHeight: "60px", height: "80%" }}
      />
      <button
        type="button"
        style={{ margin: "3px 6px" }}
        onClick={fetchAndDownloadImage}
      >
        Download
      </button>
    </div>
  );
}

const FontReadyChart = React.lazy(() =>
  document.fonts.load("900 24px 'Font Awesome 5 Free'").then(() => ({
    default: ExportDemo,
  })),
);

export function Demo() {
  return (
    <React.Suspense fallback="">
      <FontReadyChart />
    </React.Suspense>
  );
}

const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);
import { style } from "@ci/theme/rg/js/storyStyles";

export const items = {
  N1: {
    ...style.primary2,
    label: [
      {
        text: "Hassan al Fadli",
        position: "s",
      },
    ],
    border: {
      width: 2,
    },
    data: {
      country: "Afghanistan",
      region: "Middle East",
    },
    fontIcon: {
      text: "fas fa-user",
      color: style.colors.offWhite,
    },
  },
  N2: {
    ...style.primary2,
    label: [{ text: "Nabil ibn al-Salim", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N3: {
    ...style.primary2,
    label: [{ text: "Mustafa al-Bakr", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N4: {
    ...style.primary2,
    label: [{ text: "Ibrahim Abd Bakr", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N5: {
    ...style.primary2,
    label: [{ text: "Amir Abdal Faruq", position: "s" }],
    border: { width: 2 },
    data: { country: "Pakistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N6: {
    ...style.primary2,
    label: [{ text: "Omar Abu Omari", position: "s" }],
    border: { width: 2 },
    data: { country: "Pakistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N7: {
    ...style.primary2,
    label: [{ text: "Sami al Omari", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N8: {
    ...style.primary2,
    label: [{ text: "Yusuf al-Fadli", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N9: {
    color: style.colors.midGrey,
    label: [{ text: "Tariq ibn Bakr", position: "s" }],
    border: { width: 2 },
    data: { country: "Unknown Country" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N10: {
    ...style.primary2,
    label: [{ text: "Yusuf Abd Fadli", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N11: {
    ...style.primary2,
    label: [{ text: "Ahmed al Rahman", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N12: {
    ...style.primary2,
    label: [{ text: "Zaid Abdal Faruq", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N13: {
    ...style.primary2,
    label: [{ text: "Yusuf ibn Anwar", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N14: {
    ...style.primary2,
    label: [{ text: "Mustafa Abu Fadli", position: "s" }],
    border: { width: 2 },
    data: { country: "Pakistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N15: {
    ...style.primary2,
    label: [{ text: "Nabil Abd Najjar", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N16: {
    ...style.primary2,
    label: [{ text: "Faisal ibn al-Qureshi", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N17: {
    ...style.primary2,
    label: [{ text: "Faisal al Salim", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N18: {
    ...style.primary2,
    label: [{ text: "Tariq Abdal Zaman", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N19: {
    ...style.primary2,
    label: [{ text: "Karim al Najjar", position: "s" }],
    border: { width: 2 },
    data: { country: "Pakistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N20: {
    ...style.primary2,
    label: [{ text: "Zaid ibn Faruq", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N21: {
    ...style.primary2,
    label: [{ text: "Ahmed ibn al-Faruq", position: "s" }],
    border: { width: 2 },
    data: { country: "Pakistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N22: {
    ...style.primary2,
    label: [{ text: "Saad al-Omari", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N23: {
    ...style.primary2,
    label: [{ text: "Sami ibn Shafi", position: "s" }],
    border: { width: 2 },
    data: { country: "Jordan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N24: {
    ...style.primary2,
    label: [{ text: "Zaid al Hassan", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N25: {
    ...style.primary2,
    label: [{ text: "Ali al-Zaman", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N26: {
    ...style.primary2,
    label: [{ text: "Faisal Abdal Ghamdi", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N27: {
    ...style.cat05,
    label: [{ text: "Tariq al Bakr", position: "s" }],
    border: { width: 2 },
    data: { country: "Sudan", region: "Africa" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N28: {
    ...style.primary2,
    label: [{ text: "Saad ibn Omari", position: "s" }],
    border: { width: 2 },
    data: { country: "Kuwait", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N29: {
    ...style.primary2,
    label: [{ text: "Bilal al Najjar", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N30: {
    ...style.primary2,
    label: [{ text: "Omar al-Omari", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N31: {
    ...style.cat03,
    label: [{ text: "Faisal ibn Tahir", position: "s" }],
    border: { width: 2 },
    data: { country: "Britain", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N32: {
    ...style.primary2,
    label: [{ text: "Ali ibn Harbi", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N33: {
    ...style.primary2,
    label: [{ text: "Yusuf Abdal Mahdi", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N34: {
    ...style.primary2,
    label: [{ text: "Mustafa Abu Najjar", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N35: {
    ...style.primary2,
    label: [{ text: "Ibrahim al-Rahman", position: "s" }],
    border: { width: 2 },
    data: { country: "Yemen", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N36: {
    ...style.primary2,
    label: [{ text: "Yusuf Abd Hassan", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N37: {
    ...style.primary2,
    label: [{ text: "Hassan Abd Shehri", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N38: {
    ...style.primary3,
    label: [{ text: "Bilal Abd Salim", position: "s" }],
    border: { width: 2 },
    data: { country: "USA", region: "North America" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N39: {
    ...style.primary2,
    label: [{ text: "Omar ibn al-Salim", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N40: {
    ...style.primary3,
    label: [{ text: "Faisal Abdal Qureshi", position: "s" }],
    border: { width: 2 },
    data: { country: "USA", region: "North America" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N41: {
    ...style.primary2,
    label: [{ text: "Amir al Tahir", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N42: {
    ...style.primary2,
    label: [{ text: "Mohammed al Qureshi", position: "s" }],
    border: { width: 2 },
    data: { country: "Pakistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N43: {
    ...style.primary2,
    label: [{ text: "Abdul Abdal Mahdi", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N44: {
    ...style.primary2,
    label: [{ text: "Zaid ibn al-Qureshi", position: "s" }],
    border: { width: 2 },
    data: { country: "Pakistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N45: {
    ...style.primary2,
    label: [{ text: "Abdul Abdal Harbi", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N46: {
    ...style.primary2,
    label: [{ text: "Nabil Abdal Tahir", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N47: {
    ...style.primary2,
    label: [{ text: "Mustafa ibn al-Karim", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N48: {
    ...style.primary2,
    label: [{ text: "Zaid Abd Hussein", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N49: {
    ...style.cat03,
    label: [{ text: "L'Houssaine Kherchtou", position: "s" }],
    border: { width: 2 },
    data: { country: "Italy", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N50: {
    ...style.primary2,
    label: [{ text: "Abdul Abd Fawaz", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N51: {
    ...style.primary2,
    label: [{ text: "Omar al Faruq", position: "s" }],
    border: { width: 2 },
    data: { country: "Pakistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N52: {
    ...style.cat05,
    label: [{ text: "Abdul Abd Fadli", position: "s" }],
    border: { width: 2 },
    data: { country: "Tanzania", region: "Africa" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N53: {
    ...style.cat03,
    label: [{ text: "Saad Abd Shafi", position: "s" }],
    border: { width: 2 },
    data: { country: "Britain", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N54: {
    ...style.cat03,
    label: [{ text: "Faisal bin Faruq", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N55: {
    ...style.primary2,
    label: [{ text: "Khalid ibn Hassan", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N56: {
    ...style.primary2,
    label: [{ text: "Amir ibn Mahdi", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N57: {
    ...style.cat03,
    label: [{ text: "Amir ibn al-Harbi", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N58: {
    ...style.cat03,
    label: [{ text: "Yusuf Abdal Rahman", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N59: {
    ...style.cat03,
    label: [{ text: "Zaid Abd Bakr", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N60: {
    ...style.cat03,
    label: [{ text: "Ali al Karim", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N61: {
    ...style.cat03,
    label: [{ text: "Nabil bin Mahdi", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N62: {
    ...style.cat03,
    label: [{ text: "Amir Abdal Bakr", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N63: {
    ...style.cat03,
    label: [{ text: "Zaid al Harbi", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N64: {
    ...style.cat03,
    label: [{ text: "Zaid ibn Hassan", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N65: {
    ...style.cat03,
    label: [{ text: "Amir al-Hassan", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N66: {
    ...style.cat03,
    label: [{ text: "Khalid al Salim", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N67: {
    ...style.cat03,
    label: [{ text: "Hassan Abdal Hassan", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N68: {
    ...style.primary3,
    label: [{ text: "Jamal Abu Shehri", position: "s" }],
    border: { width: 2 },
    data: { country: "USA", region: "North America" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N69: {
    ...style.primary2,
    label: [{ text: "Nabil ibn al-Fadli", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N70: {
    color: style.colors.midGrey,
    label: [{ text: "Karim ibn al-Shehri", position: "s" }],
    border: { width: 2 },
    data: { country: "Unknown Country" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N71: {
    ...style.primary2,
    label: [{ text: "Yusuf al-Karim", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N72: {
    ...style.primary2,
    label: [{ text: "Mustafa bin Faruq", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N73: {
    ...style.primary2,
    label: [{ text: "Ali Abd Shafi", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N74: {
    ...style.primary2,
    label: [{ text: "Mohammed bin Anwar", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N75: {
    ...style.primary2,
    label: [{ text: "Khalid al-Hussein", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N76: {
    ...style.primary2,
    label: [{ text: "Amir Abd Omari", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N77: {
    ...style.primary2,
    label: [{ text: "Amir Abu Ghamdi", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N78: {
    ...style.primary2,
    label: [{ text: "Yusuf al Shafi", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N79: {
    ...style.primary2,
    label: [{ text: "Abdul Abdal Shehri", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N80: {
    ...style.primary2,
    label: [{ text: "Yusuf Abd Qureshi", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N81: {
    ...style.primary2,
    label: [{ text: "Mohammed Abu Fadli", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N82: {
    ...style.primary2,
    label: [{ text: "Bilal al Rahman", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N83: {
    ...style.primary2,
    label: [{ text: "Karim al-Fadli", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N84: {
    ...style.cat05,
    label: [{ text: "Ali Abdal Omari", position: "s" }],
    border: { width: 2 },
    data: { country: "Morocco", region: "Africa" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N85: {
    ...style.primary2,
    label: [{ text: "Nabil al Omari", position: "s" }],
    border: { width: 2 },
    data: { country: "Pakistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N86: {
    ...style.primary3,
    label: [{ text: "Saad Abdal Omari", position: "s" }],
    border: { width: 2 },
    data: { country: "USA", region: "North America" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N87: {
    ...style.primary3,
    label: [{ text: "Bilal al Anwar", position: "s" }],
    border: { width: 2 },
    data: { country: "Canada", region: "North America" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N88: {
    ...style.primary2,
    label: [{ text: "Khalid ibn al-Najjar", position: "s" }],
    border: { width: 2 },
    data: { country: "Yemen", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N89: {
    ...style.cat03,
    label: [{ text: "Khalid ibn Tahir", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N90: {
    ...style.cat03,
    label: [{ text: "Yusuf Abu Fadli", position: "s" }],
    border: { width: 2 },
    data: { country: "Britain", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N91: {
    ...style.primary2,
    label: [{ text: "Saad al Fadli", position: "s" }],
    border: { width: 2 },
    data: { country: "Pakistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N92: {
    color: style.colors.midGrey,
    label: [{ text: "Mohammed Abd Anwar", position: "s" }],
    border: { width: 2 },
    data: { country: "Unknown Country" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N93: {
    color: style.colors.midGrey,
    label: [{ text: "Bilal al-Zaman", position: "s" }],
    border: { width: 2 },
    data: { country: "Unknown Country" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N94: {
    ...style.primary2,
    label: [{ text: "Ali Abd Mahdi", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N95: {
    ...style.primary2,
    label: [{ text: "Faisal Abdal Omari", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N96: {
    ...style.primary2,
    label: [{ text: "Zaid Abu Shafi", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N97: {
    ...style.primary3,
    label: [{ text: "Mohammed Abu Hassan", position: "s" }],
    border: { width: 2 },
    data: { country: "Canada", region: "North America" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N98: {
    ...style.primary3,
    label: [{ text: "Saad Abdal Fadli", position: "s" }],
    border: { width: 2 },
    data: { country: "Canada", region: "North America" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N99: {
    ...style.primary2,
    label: [{ text: "Ali Abdal Hassan", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N100: {
    ...style.primary2,
    label: [{ text: "Saad ibn al-Karim", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N101: {
    ...style.primary2,
    label: [{ text: "Saad bin Omari", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N102: {
    ...style.primary2,
    label: [{ text: "Ali bin Harbi", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N103: {
    ...style.primary2,
    label: [{ text: "Mohammed bin Ghamdi", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N104: {
    ...style.cat03,
    label: [{ text: "James Wright", position: "s" }],
    border: { width: 2 },
    data: { country: "Germany", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N105: {
    ...style.primary2,
    label: [{ text: "Nabil Abd Qureshi", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N106: {
    color: style.colors.midGrey,
    label: [{ text: "Mustafa al Anwar", position: "s" }],
    border: { width: 2 },
    data: { country: "Unknown Country" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N107: {
    ...style.primary2,
    label: [{ text: "Bilal ibn al-Zaman", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N108: {
    ...style.primary2,
    label: [{ text: "Abdul Abu Najjar", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N109: {
    ...style.cat03,
    label: [{ text: "Hassan Abdal Najjar", position: "s" }],
    border: { width: 2 },
    data: { country: "Britain", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N110: {
    ...style.cat03,
    label: [{ text: "Ibrahim Abd Qureshi", position: "s" }],
    border: { width: 2 },
    data: { country: "Britain", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N111: {
    ...style.cat03,
    label: [{ text: "Hassan Abd Fawaz", position: "s" }],
    border: { width: 2 },
    data: { country: "Britain", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N112: {
    ...style.cat03,
    label: [{ text: "Khalid Abdal Shehri", position: "s" }],
    border: { width: 2 },
    data: { country: "Britain", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N113: {
    ...style.cat03,
    label: [{ text: "Omar ibn al-Faruq", position: "s" }],
    border: { width: 2 },
    data: { country: "Britain", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N114: {
    ...style.cat03,
    label: [{ text: "Samuel Taylor", position: "s" }],
    border: { width: 2 },
    data: { country: "Britain", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N115: {
    ...style.cat03,
    label: [{ text: "Khalid Abu Ghamdi", position: "s" }],
    border: { width: 2 },
    data: { country: "Britain", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N116: {
    ...style.cat03,
    label: [{ text: "Jamal al Hussein", position: "s" }],
    border: { width: 2 },
    data: { country: "Britain", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N117: {
    ...style.cat03,
    label: [{ text: "Mohammed al Shehri", position: "s" }],
    border: { width: 2 },
    data: { country: "Britain", region: "Europe" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N118: {
    ...style.primary2,
    label: [{ text: "Saad Abd Shehri", position: "s" }],
    border: { width: 2 },
    data: { country: "Yemen", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N119: {
    ...style.primary2,
    label: [{ text: "Omar Abu Anwar", position: "s" }],
    border: { width: 2 },
    data: { country: "Yemen", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N120: {
    ...style.primary2,
    label: [{ text: "Jamal Abd Rahman", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N121: {
    ...style.primary2,
    label: [{ text: "Jamal ibn Hussein", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N122: {
    ...style.primary2,
    label: [{ text: "Hassan al Hussein", position: "s" }],
    border: { width: 2 },
    data: { country: "Kuwait", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N123: {
    ...style.primary2,
    label: [{ text: "Mustafa Abdal Harbi", position: "s" }],
    border: { width: 2 },
    data: { country: "Kuwait", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N124: {
    ...style.primary2,
    label: [{ text: "Ahmed Abdal Salim", position: "s" }],
    border: { width: 2 },
    data: { country: "Kuwait", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N125: {
    ...style.primary2,
    label: [{ text: "Abdul Abu Anwar", position: "s" }],
    border: { width: 2 },
    data: { country: "Kuwait", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N126: {
    ...style.primary2,
    label: [{ text: "Tariq Abdal Hussein", position: "s" }],
    border: { width: 2 },
    data: { country: "Kuwait", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N127: {
    ...style.primary2,
    label: [{ text: "Faisal bin Mahdi", position: "s" }],
    border: { width: 2 },
    data: { country: "Kuwait", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N128: {
    ...style.primary2,
    label: [{ text: "Omar al Anwar", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N129: {
    ...style.primary2,
    label: [{ text: "Mustafa Abd Harbi", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N130: {
    ...style.primary2,
    label: [{ text: "Nabil Abd Ghamdi", position: "s" }],
    border: { width: 2 },
    data: { country: "Afghanistan", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N131: {
    ...style.primary2,
    label: [{ text: "Saad Abd Faruq", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N132: {
    color: style.colors.midGrey,
    label: [{ text: "Ahmed Abu Tahir", position: "s" }],
    border: { width: 2 },
    data: { country: "Unknown Country" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N133: {
    ...style.primary2,
    label: [{ text: "Mustafa Abdal Bakr", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N134: {
    ...style.primary2,
    label: [{ text: "Bilal al-Mahdi", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N135: {
    ...style.primary2,
    label: [{ text: "Mustafa Abu Shehri", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N136: {
    ...style.primary2,
    label: [{ text: "Ali ibn Karim", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N137: {
    ...style.primary2,
    label: [{ text: "Amir Abu Shafi", position: "s" }],
    border: { width: 2 },
    data: { country: "Saudi Arabia", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N138: {
    ...style.primary2,
    label: [{ text: "Ahmed bin Zaman", position: "s" }],
    border: { width: 2 },
    data: { country: "Turkey", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N139: {
    ...style.primary2,
    label: [{ text: "Hassan Abu Ghamdi", position: "s" }],
    border: { width: 2 },
    data: { country: "Turkey", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N140: {
    ...style.primary2,
    label: [{ text: "Yusuf Abu Bakr", position: "s" }],
    border: { width: 2 },
    data: { country: "Turkey", region: "Middle East" },
    fontIcon: { text: "fas fa-user", color: style.colors.offWhite },
  },
  N141: {
    ...style.primary2,
    label: [{ text: "Tariq ibn al-Anwar", position: "s" }],
    border: { width: 2 },

// ...truncated 9278 lines
<!doctype html>
<html>
  <body>
    <div id="regraph" style="height: 100vh"></div>
    <script type="module" src="./code.jsx"></script>
  </body>
</html>

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.