React ChartsMaps - Overview

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  GradientLegendModule,
  MapShapeBackgroundSeriesModule,
  MapShapeSeriesModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { data } from "./data";
import { topology } from "./topology";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  GradientLegendModule,
  MapShapeBackgroundSeriesModule,
  MapShapeSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data,
    topology,
    series: [
      {
        type: "map-shape-background",
      },
      {
        type: "map-shape",
        title: "Access to Clean Fuels",
        idKey: "name",
        colorKey: "value",
        colorName: "% of population",
      },
    ],
    gradientLegend: {
      enabled: true,
      position: "right",
      gradient: {
        preferredLength: 200,
        thickness: 2,
      },
      scale: {
        label: {
          fontSize: 10,
          formatter: (p) => p.value + "%",
        },
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  MapLineSeriesModule,
  MapMarkerSeriesModule,
  MapShapeBackgroundSeriesModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { backgroundTopology } from "./backgroundTopology";
import { backgroundTopologyNI } from "./backgroundTopologyNI";
import { routeData } from "./routeData";
import { routeTopology } from "./routeTopology";
import { stationData } from "./stationData";
import { stationTopology } from "./stationTopology";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  MapLineSeriesModule,
  MapMarkerSeriesModule,
  MapShapeBackgroundSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    series: [
      {
        type: "map-shape-background",
        topology: backgroundTopologyNI,
        fill: "#badc58",
        fillOpacity: 0.4,
      },
      {
        type: "map-shape-background",
        topology: backgroundTopology,
        fill: "#badc58",
      },
      {
        type: "map-line",
        topology: routeTopology,
        data: routeData,
        idKey: "name",
        stroke: "#4834d4",
        strokeWidth: 2,
      },
      {
        type: "map-marker",
        topology: stationTopology,
        data: stationData,
        idKey: "name",
        labelKey: "name",
        fill: "#4834d4",
        fillOpacity: 1,
        strokeWidth: 0,
        size: 5,
        label: {
          color: "#535c68",
          fontSize: 8,
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  MapMarkerSeriesModule,
  MapShapeBackgroundSeriesModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import {
  africaData,
  asiaData,
  europeData,
  northAmericaData,
  oceaniaData,
  southAmericaData,
} from "./data";
import { topology } from "./topology";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  MapMarkerSeriesModule,
  MapShapeBackgroundSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    padding: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
    },
    topology,
    series: [
      {
        type: "map-shape-background",
        topology,
      },
      {
        type: "map-marker",
        topology,
        data: [
          ...europeData,
          ...asiaData,
          ...africaData,
          ...northAmericaData,
          ...southAmericaData,
          ...oceaniaData,
        ],
        title: "Population",
        idKey: "name",
        idName: "Country",
        sizeKey: "pop_est",
        sizeName: "Population Estimate",
        topologyIdKey: "NAME_ENGL",
        size: 5,
        maxSize: 60,
        labelKey: "name",
        showInLegend: false,
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);