npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

chartogram

v0.1.23

Published

Charts in JS with no dependencies

Downloads

31

Readme

chartogram

Charts in JS with no dependencies.

Also includes a React component for those who're using React.

DEMO

Originally created as part of Telegram Charts Contest.

Screenshots

Day

View in full resolution

Night

View in full resolution

Use

The default exported function takes four arguments:

  • The DOM element where the chart will be rendered.
  • Chart data.
  • Chart title.
  • (optional) options.

Chart data must have shape:

{
  x: {
    points: Number[]
  },
  y: {
    id: string,
    name: string,
    color: string,
    points: Number[]
  }[]
}

So there must be a single x and one or more ys.

Example:

{
  x: {
    points: [
      1553769000,
      1553770000,
      1553771000
    ]
  },
  y: [
    {
      id: 'y1',
      name: 'Temperature',
      color: '#cc0000',
      points: [
        60,
        69,
        65
      ]
    },
    {
      id: 'y2',
      name: 'CPU load',
      color: '#00aa00',
      points: [
        95,
        98,
        90
      ]
    }
  ]
}

The default exported function returns another function which must be called in case of "destroying" the chart (it cleans up global event listeners and resets the DOM node).

Browser

<!DOCTYPE html>
<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'), data, 'Title')
    </script>
  </body>
</html>

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

Bundler

npm install chartogram --save
import chartogram from 'chartogram'
import 'chartogram/style.css'

chartogram(element, data, title)

React (bundler)

npm install chartogram --save
import React from 'react'
import Chartogram from 'chartogram/react'
import 'chartogram/style.css'

export default class Page extends React.Component {
  render() {
    return (
      <Chartogram
        data={data}
        title={title}
        options={options}/>
    )
  }
}

React (browser)

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

  <body>
    <section id="page"></section>

    <script>
      class Page extends React.Component {
        render() {
          return (
            <Chartogram
              data={data}
              title="Followers"
              options={options}/>
          )
        }
      }

      ReactDOM.render(
        <Page/>,
        document.getElementById("page")
      )
    </script>
  </body>
</html>

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

Night mode

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

Options

  • formatX(value: number, { long: boolean }) — Formats X axis labels. long option is for the tooltip. Uses Intl.DateTimeFormat by default.
  • formatY(value: number) — Formats Y axis labels (including tooltip). Uses Intl.NumberFormat by default.
  • locale: string — Is used to format dates (the default system locale is used if none supplied).
  • transitionDuration: number — The maximum transition duration (in milliseconds).
  • transitionEasing: string — Is easeOutQuad by default.
  • yAxisTickMarksCount: number — Y axis tick marks count.
  • yAxisPrecision: number — Y axis tick mark labels rounding precision: the number of fraction digits to use when formatting Y axis labels. Is 0 by default.
  • xAxisTickMarkWidth: number — (in pixels) Is used to calculate the count of X axis tick marks based on canvas width (in pixels).
  • canvasWidth: number — SVG viewBox width (not pixels).
  • precision: number — SVG coordinates rounding precision.
  • timelineWindowSize: number — The initial size of timeline window (in points).

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, Firefox, Microsoft Edge, Internet Explorer 11 and iOS Safari.

The styles use CSS variables which are supported in all browsers except Internet Explorer that would require using something like PostCSS with a plugin like postcss-custom-properties or postcss-css-variables.

Internet Explorer would also require the following polyfills: