Skip to content
Chart.js Choropleth and Bubble Maps
JavaScript
Branch: master
Clone or download
Latest commit 8a26a41 Dec 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create question.md Dec 2, 2019
samples closes #5 clipping of bubble map Dec 5, 2019
src closes #5 clipping of bubble map Dec 5, 2019
.editorconfig initial commit Sep 24, 2019
.eslintrc initial commit Sep 24, 2019
.gitignore distribute pack, too Sep 28, 2019
.release-it.json distribute pack, too Sep 28, 2019
LICENSE initial commit Sep 24, 2019
README.md fix: typo Dec 16, 2019
babel.config.js initial commit Sep 24, 2019
jest.config.js initial commit Sep 24, 2019
package-lock.json
package.json Release 1.1.1 Dec 4, 2019
rollup.config.js initial setup Sep 24, 2019

README.md

Chart.js Graphs

NPM Package Github Actions

Chart.js module for charting maps. Adding new chart types: choropleth and bubbleMap

Works only with Chart.js >= 2.8.0

Choropleth

CodePen

Earth Choropleth

CodePen

Bubble Map

CodePen

works great with https://github.com/chartjs/chartjs-plugin-datalabels

Install

npm install --save chart.js chartjs-chart-geo

Usage

see Samples on Github

CodePens

Options

The option can be set globally or per dataset

interface IGeoChartOptions {
  /**
   * Outline used to scale and centralize the projection in the chart area.
   * By default a sphere is used
   * @default { type: 'Sphere" }
   */
  outline: Feature | Feature[];
  /**
   * option to render the outline in the background, see also the outline... styling option
   * @default false
   */
  showOutline: boolean;

  /**
   * option to render a graticule in the background, see also the outline... styling option
   * @default false
   */
  showGraticule: boolean | {
    stepMajor: [number, number],
    stepMinor: [number, number]
  };

  /**
   * option whether to clip the rendering to the chartArea of the graph
   * @default choropleth: true bubbleMap: 'outline+graticule'
   */
  clipMap: boolean | 'outline' | 'graticule' | 'outline+graticule' | 'items';
}

Choropleth

A Choropleth (chart type: choropleth) is used to render maps with the area filled according to some numerical value.

Choropleth

CodePen

Earth Choropleth

CodePen

Data Structure

A data point has to have a .feature property containing the feature to render.

TopoJson is packaged with this plugin to convert data, it is exposed as ChartGeo.topojson in the global context.

const us = await fetch('https://unpkg.com/us-atlas/states-10m.json').then((r) => r.json());

// whole US for the outline
const nation = ChartGeo.topojson.feature(us, us.objects.nation).features[0];
// individual states
const states = ChartGeo.topojson.feature(us, us.objects.states).features;

const alaska = states.find((d) => d.properties.name === 'Alaska');
const california = states.find((d) => d.properties.name === 'California');
...

const config = {
  data: {
    labels: ['Alaska', 'California'],
    datasets: [{
      label: 'States',
      outline: nation, // ... outline to compute bounds
      showOutline: true,
      backgroundColor: (context) => {
        if (context.dataIndex == null) {
          return null;
        }
        const value = context.dataset.data[context.dataIndex];
        return new Color('steelblue').lightness(value.value * 100).rgbString();
      },
      data: [
        {
          value: 0.4,
          feature: alaska // ... the feature to render
        },
        {
          value: 0.3,
          feature: california
        }
      ]
    }]
  },
  options: {
    // ! Only one scale is supported via the options.scale option
    scale: {
      projection: 'albersUsa' // ... projection method
    }
  }
};

Styling

The styling of the new element GeoFeature is based on Rectangle Element with some additional options for the outline and graticule.

interface IGeoFeatureOptions {
  // all options of an Rectangle

  /**
   * background color for the outline
   * @default null
   */
  outlineBackgroundColor: string | null;
  /**
   * border color for the outline
   * @default defaultColor of Chart.js
   */
  outlineBorderColor: string;
  /**
   * border width for the outline
   * @default 0
   */
  outlineBorderWidth: number;

  /**
   * border color for the graticule
   * @default #CCCCCC
   */
  graticuleBorderColor: string;
  /**
   * border width for the graticule
   * @default 0
   */
  graticuleBorderWidth: string;
}

Bubble Map

A Bubble Map (chart type: bubbleMap) aka Proportional Symbol is used to render maps with dots that are scaled according to some numerical value. It is based on a regular bubble chart where the positioning is done using latitude and longtitude.

Bubble Map

CodePen

Data Structure

see Bubble Chart. Alternatively to x and y, the following structure can be used:

interface IBubbleMapPoint {
  longitude: number;
  latitude: number;
  r: number;
}

Styling

A regular point is used and thus supports the Point Element styling options. In addition, the outline* and graticule* are supported.

Scales

A new scale projection is registered and used by default by Choropleth and BubbleMap. It provides just one option to specify the projection method. The available methods are the one from https://github.com/d3/d3-geo#projections. Just remove the geo prefix. Alternatively, the projection method instance can be directly given.

interface IProjectionScaleOptions {
  /**
   * projection method used
   * @default albertUsa
   */
  projection: string | Function;
}

Building

npm install
npm run build
You can’t perform that action at this time.