Announcing embeddable trend graphs for npm 🎉

You can now supplement articles on javascript technologies with interactive charts of their download trends!

Charts from npmcharts.com can now also be expanded inline on Medium, Reddit, and other places that use Embed.ly to provide rich media embeds.

To embed these into medium articles, copy the url from npmcharts.com, e.g. “https://npmcharts.com/compare/lodash”, paste it into a new paragraph in the editor, then hit Enter.

Here’s a screenshot of what it looks like expanded on reddit:

link to reddit submission

Caveat

When pasting comparisons with a scoped package from the browser’s address bar, you might see this:

@angular/core,vue”>https://npmcharts.com/compare/react,angular,@angular/core,vue

This is due to the@ character confusing Medium’s editor into thinking it’s tagging someone. For now, the solution is as follows —

• Delete the extra HTML in the beginning
• Double click the scoped package name and remove the link

• Move your cursor to the end of the url and hit enter

Dear module authors and maintainers

I would be honoured if you were to link to npmcharts.com via the package README’s downloads badge. Here’s a snippet using lodash as an example:

[![NPM Downloads][downloads-image]][downloads-url]
[downloads-image]: https://img.shields.io/npm/dm/lodash.svg
[downloads-url]: https://npmcharts.com/compare/lodash?minimal=true

This would give you the shields.io badge that looks like this:

And which would link to https://npmcharts.com/compare/lodash?minimal=true

Ideas and feedback are very welcome! There’s a roadmap of upcoming features on the project’s Github Issues. You can also tweet at me @CheapSteak, or follow @npmcharts to see download trends and comparisons of (occasionally esoteric) npm libraries.

Thanks to @Jephuff for proofreading, npm for npm and their API, and thanks again to Embed.ly for providing the platform and helping with integration.

Now, here are more comparison charts!

GraphQL Clients

React Component Libraries

CSS-in-JS