d3-horizon-chart

d3-horizon-chart is a d3 plugin that draws horizon charts using an Html5 Canvas. It provides an easy way to visualize large amounts of time series data.

The plugin is heavily inspired by cubism.js, but doesn't make assumptions about real-time metrics and back-end servers such as Cube/Graphite. This makes it a good fit when you just want to plot your data as a horizon chart.

d3-horizon-chart follows the latest plugin guidelines using D3’s new 4.0 module pattern.

Examples

• Drawing a single horizon chart
• Loosing resolution when using area chart
• Horizon charts preserve resolution at smaller heights
• Visualizing stock data using horizon charts

Check out the project page for more examples.

Installing

If you use NPM, npm install d3-horizon-chart. Otherwise, download the latest release.

API Reference

# horizonChart()

Constructs a new horizonChart generator with the default settings.

# horizon.height([height])

If height is specified, sets the height of the chart to the specified number and returns this horizonChart generator. If height is not specified, returns the current height accessor, which defaults to:

function height() {
  return 30;
}