Examples

Choropleth Map

Code

config

export const config: ChartConfiguration<'choropleth'> = {
  type: 'choropleth',
  data,
  options: {
    scales: {
      projection: {
        axis: 'x',
        projection: 'albersUsa',
      },
      color: {
        axis: 'x',
        quantize: 5,
        legend: {
          position: 'bottom-right',
          align: 'right',
        },
      },
    },
  },
};

data

import states10m from 'us-atlas/states-10m.json';

const nation: Feature = topojson.feature(states10m as any, states10m.objects.nation as any).features[0];
const states: Feature = topojson.feature(states10m as any, states10m.objects.states as any).features;

export const data: ChartConfiguration<'choropleth'>['data'] = {
  labels: states.map((d) => d.properties.name),
  datasets: [
    {
      label: 'States',
      outline: nation,
      data: states.map((d) => ({
        feature: d,
        value: Math.random() * 11,
      })),
    },
  ],
};

Bubble Map

Code

config

export const config: ChartConfiguration<'bubbleMap'> = {
  type: 'bubbleMap',
  data,
  options: {
    plugins: {
      datalabels: {
        align: 'top',
        formatter: (v) => {
          return v.description;
        },
      },
    },
    scales: {
      projection: {
        axis: 'x',
        projection: 'albersUsa',
      },
      size: {
        axis: 'x',
        size: [1, 20],
      },
    },
    layout: {
      // padding: 20
    },
  },
  plugins: [ChartDataLabels],
};

data

import states10m from 'us-atlas/states-10m.json';
import capitals from './data/us-capitals.json';
import ChartDataLabels from 'chartjs-plugin-datalabels';

const states: Feature = topojson.feature(states10m as any, states10m.objects.states as any).features;

export const data: ChartConfiguration<'bubbleMap'>['data'] = {
  labels: capitals.map((d) => d.description),
  datasets: [
    {
      outline: states,
      showOutline: true,
      backgroundColor: 'steelblue',
      data: capitals.map((d) => Object.assign(d, { value: Math.round(Math.random() * 10) })),
    },
  ],
};