Geographic Charts

Choropleth and Bubble Map charts for geographic data visualization.

Registration

Add to .vitepress/theme/index.ts:

import DefaultTheme from 'vitepress/theme'
import 'vitepress-plugin-chartjs/style.css'

export default {
  extends: DefaultTheme,
  async enhanceApp({ app }) {
    if (typeof window !== 'undefined') {
      const { Chart, registerables } = await import('chart.js')
      Chart.register(...registerables)

      const geo = await import('chartjs-chart-geo')
      Chart.register(
        geo.ChoroplethController,
        geo.BubbleMapController,
        geo.GeoFeature,
        geo.ProjectionScale,
        geo.ColorScale,
        geo.SizeScale
      )
    }
  }
}

Installation

npm install chartjs-chart-geo topojson-client

---

Loading from External File

The recommended way to create geo charts with real map data is using JavaScript configuration files. JS modules run at build time in Node.js, so use installed npm packages (not browser imports).

US States Map

Loading chart...

Code: | View Config

```chart
url: /charts/us-states.js
```

View us-states.js source

// US States Choropleth Map
// Build-time: uses Node.js fetch + installed topojson-client
import * as topojson from 'topojson-client';

export default async function () {
  const response = await fetch('https://unpkg.com/us-atlas/states-10m.json');
  const us = await response.json();

  const nation = topojson.feature(us, us.objects.nation).features[0];
  const states = topojson.feature(us, us.objects.states).features;

  return {
    type: 'choropleth',
    data: {
      labels: states.map((d) => d.properties.name),
      datasets: [{
        label: 'States',
        outline: nation,
        data: states.map((d) => ({ feature: d, value: Math.random() * 10 }))
      }]
    },
    options: {
      plugins: {
        legend: { display: false },
        datalabels: { display: false }
      },
      scales: {
        projection: { axis: 'x', projection: 'albersUsa' },
        color: { axis: 'x', quantize: 5, legend: { display: false } }
      }
    }
  }
}

---

World Countries Map

Loading chart...

Code: | View Config

```chart
url: /charts/world-countries.js
```

View world-countries.js source

// World Countries Choropleth Map
// Build-time: uses Node.js fetch + installed topojson-client
import * as topojson from 'topojson-client';

export default async function () {
  const response = await fetch('https://unpkg.com/world-atlas/countries-50m.json');
  const world = await response.json();

  const land = topojson.feature(world, world.objects.land).features[0];
  const countries = topojson.feature(world, world.objects.countries).features;

  return {
    type: 'choropleth',
    data: {
      labels: countries.map((d) => d.properties.name),
      datasets: [{
        label: 'Countries',
        outline: land,
        data: countries.map((d) => ({ feature: d, value: Math.random() * 10 }))
      }]
    },
    options: {
      plugins: {
        legend: { display: false },
        datalabels: { display: false }
      },
      scales: {
        projection: { axis: 'x', projection: 'equalEarth' },
        color: { axis: 'x', quantize: 5, legend: { position: 'bottom-right' } }
      }
    }
  }
}

---

Inline Data Examples

For simple maps without external data, you can define geometry inline.

Choropleth (Inline)

Loading chart...

---

Bubble Map (Inline)

Loading chart...

---

Configuration Reference

Projection Types

Projection	Description
equirectangular	Simple cylindrical projection
mercator	Standard web map projection
albersUsa	Optimized for USA maps
naturalEarth1	Pseudo-cylindrical projection
equalEarth	Equal-area projection
orthographic	Globe view

Scales

options:
  scales:
    projection:
      axis: x
      projection: mercator
    color:
      axis: x
      quantize: 5
      interpolate: blues
      legend:
        position: bottom-right
    size:                   # For bubbleMap
      axis: x
      size: [5, 30]

Data Formats

Choropleth:

data:
  - feature: <GeoJSON Feature>
    value: 100

Bubble Map:

data:
  - latitude: 40.7128
    longitude: -74.006
    value: 1000

---

Resources

• chartjs-chart-geo - Plugin documentation
• Natural Earth - Free GeoJSON data
• US Atlas TopoJSON - US states and counties
• World Atlas TopoJSON - World countries