Wednesday, April 6, 2016

NVD3 Web Components for Polymer

NVD3 charts as web components for Polymer
NVD3 charts as web components for Polymer.

I'm using Google Polymer for a front-end project. Polymer is a library for creating Web Components, which are a set of W3C standards and upcoming browser APIs for defining your own custom HTML elements. As it's new, there are not many available web components for it. I've decided to make a bunch of chart elements for Polymer.

NVD3 Elements

NVD3 is a charting library written in D3. It provides many chart types and supports all d3 functions. I've created the following chart elements based on NVD3:
  • <nvd3-line>
  • <nvd3-line-with-focus>
  • <nvd3-pie>
  • <nvd3-donut>
  • <nvd3-scatter>
  • <nvd3-bullet>
  • <nvd3-discrete-bar>
  • <nvd3-stacked-area>
  • <nvd3-multi-bar>
  • <nvd3-multi-bar-horizontal>
  • <nvd3-cumulative-line>
  • <nvd3-sunburst>


You could use bower for installing the elements or download the latest version from github.
bower install nvd3-elements

Demo and Options

There are many options which you could set and configure for your chart. See the component page for demo and options.


You could check my other web components such as <github-fork-ribbon> and <d3-bubble> at

No comments:

Post a Comment