Stock charts

D3 Stock charts

This script aims to provide simple, lightweight, modulable and responsive financial charts. It allows to draw curves, areas or bands, on one or several charts, to show custom time intervals, and show values on over. You can have a look on the reference or check the source code.


# stockchart(data, time, container, parameters)

Create a stockchart constructor and show the chart in the specified container, based on the specified data (see stocks.load), time interval (see, and module and curves parameters (see below).

d3.csv("mydata.csv", function(e, data) {
  var chart = new stockchart(data, "1y", "#mydiv", parameters);

# stocks.load(data)

Read and draw the specified data, which can be returned from d3.csv, d3.tsv, d3.json or d3.xml. If another chart is already shown, clear the current chart and draw the specified data.

d3.csv("mydata.csv", function(e, data) {


Show data from the specified time interval, provided as a string in months (e.g. 6m) or years (e.g. 2y). If time interval isn’t specified or can’t be read, show all values."2y");"6m");


The parameters argument provides a list of charts (defined as objects), which contains a list of curves (also defined as object). Both can take several options.


# curves: list of the curves to be drawn in the current chart; see below.

# height: defines the height of the current chart, which defaults to 60.

# ratio: gives the ability to show relative values, based on the data selected the specified id; if simply set to true, show relative values based on each variable.

# x_axis: if true, draw an horizontal axis under the given chart.

# y_axis: if sym is provided, the vertical axis will have a symetrical domain.


# color: specify the color of the curve.

# diff: if true, show the evolution since the day before in the legend.

# id: set the curve id, which must be the same than the column name in the provided data; if an array of two id is specified, draw an area between those two curves.

# name: specify the name shown in the legend; if not specified, the data won’t be shown in the legend.

# type: if area is provided, draw a green and red area chart depending of the sign.

# width: specify the width of the curve.


This repository is released under MIT License.

Please comment or edit this page!