Getting Started

Grabbing the code

d3fc and its dependencies are available via npm or the unpkg CDN. The d3fc project is composed of a number of separate packages, detailed in the API documentation. Each of these packages can be installed via npm and used independently, or if you you can install the entire d3fc bundle, which includes all of the separate packages.

This packaging style mirrors the way that D3(v4) is distributed.

Installing the bundle with npm

d3fc depends on D3, you can install both the d3fc bundle and D3 via npm as follows:

npm install d3fc d3

Once installed, you can reference both of these within an HTML page as follows:

<script src="node_modules/d3/build/d3.min.js"></script>
<script src="node_modules/d3fc/build/d3fc.min.js"></script>

d3fc supports modern browsers. Depending on the browsers you are targeting, you may need a few polyfills in order to run d3fc. The first is a polyfill for Symbol, such as es6-symbol, or the general babel-polyfill, the second is a polyfill for CustomEvent, such as custom-event-polyfill and finally a polyfill for Custom Elements.

CDN hosted versions

Alternatively you can link to the CDN hosted versions of d3fc and D3 directly:

<script src="https://unpkg.com/d3/build/d3.min.js"></script>
<script src="https://unpkg.com/d3fc/build/d3fc.min.js"></script>

You can also find the latest version (together with previous versions) on cdnjs.

A quick chart

If you want a quick verification that everything has installed correctly, the following code will render a Cartesian chart:

<div id="chart" style="width: 100%; height: 250px"></div>
var data = fc.randomFinancial()(50);

var yExtent = fc.extentLinear()
  .accessors([
    function(d) { return d.high; },
    function(d) { return d.low; }
  ]);

var xExtent = fc.extentDate()
  .accessors([function(d) { return d.date; }]);

var gridlines = fc.annotationSvgGridline();
var candlestick = fc.seriesSvgCandlestick();
var multi = fc.seriesSvgMulti()
    .series([gridlines, candlestick]);

var chart = fc.chartSvgCartesian(
    fc.scaleDiscontinuous(d3.scaleTime()),
    d3.scaleLinear()
  )
  .yDomain(yExtent(data))
  .xDomain(xExtent(data))
  .plotArea(multi);

d3.select('#chart')
  .datum(data)
  .call(chart);

Here is how the chart should look:

The next step is to follow the more in-depth tutorial on building a chart.

Found a problem in this page? Submit a fix!