<html>
  <head>
    <script src="https://unpkg.com/chartogram@[version]/bundle/chartogram.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/chartogram@[version]/style.css"/>
  </head>

  <body>
    <section id="chart"></section>
    <script>
      chartogram(document.getElementById('chart'))
    </script>
  </body>
</html>

where [version] is an npm package version range (for example, 0.1.x or ^0.1.0).

React

npm install chartogram --save

import React from 'react'
import chartogram from 'chartogram'
import 'chartogram/style.css'

class Chartogram extends React.Component {
  node = React.createRef()

  componentDidMount() {
    chartogram(this.node.current)
  }

  componentWillUnmount() {
    // Can remove any global event listeners here.
  }

  render() {
    return <section ref={this.node}/>
  }
}

Night mode

Add chartogram--night-mode CSS class to the chart <section/> to switch to Night Mode.

Custom colors

To customize colors override the CSS variables:

body {
	--content-color: black;
	--background-color: white;
	--night-mode-transition-duration: 300ms;
}

.night-mode {
	--background-color: rgb(36,47,62);
	--content-color: white;
}

.chartogram {
	--chartogram-background-color: var(--background-color);
	--chartogram-content-color: var(--content-color);
	--chartogram-night-mode-transition-duration: var(--night-mode-transition-duration);
	/* See `style.css` for the list of all available CSS variables. */
	--chartogram-font-size: 16px;
	--chartogram-tooltip-background-color: white;
}

.chartogram--night-mode {
	/* See `style.css` for the list of all available CSS variables. */
	--chartogram-tooltip-background-color: #293544;
}

Browser compatibility

Tested in Chrome and iOS Safari.

Mostly works in Firefox but SVG canvas drawing is buggy for some reason.

Throws some syntax error in Edge.

Won't support Internet Explorer.

The styles use CSS variables which work everywhere except Internet Explorer.

Keywords

charts

FAQs

What is chartogram?

Is chartogram popular?

Is chartogram well maintained?

Package last updated on 27 Mar 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install