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. For pre-Edge versions of IE, you'll need a couple of polyfills in order to run d3fc code within the browser. The first is a polyfill for Symbol, such as es6-symbol, or the general babel-polyfill, and the second is a polyfill for CustomEvent, such as custom-event-polyfill.

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!