Svelte Jvectormap

Pro Component

Jvectormap is a vector-based, cross-browser and cross-platform component for interactive geography-related data visualization on the web.
Keep reading our Svelte Jvectormap example and learn how to use this plugin.

Usage

<script>

import Card from "../../../components/Cards/Card.svelte";
export let name = "Vector map";
import FusionCharts from "fusioncharts";
import Charts from "fusioncharts/fusioncharts.charts";
import Maps from "fusioncharts/fusioncharts.maps";
import World from "fusioncharts/maps/fusioncharts.world";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import SvelteFC, { fcRoot } from "svelte-fusioncharts";

chartConfig = {
  type: "world",
  renderAt: "chart-container",
  width: "100%",
  height: 900,
  dataSource
};

</script>

Example

<Card noBody={true} className="border-0">
  <div class="card-body pt-0">
    <div id="chart-container" style="height: inherit;">
      <SvelteFC {...chartConfig} />
    </div>
  </div>
</Card>