d3-horizon-chart

Simple Horizon Chart library based on D3.js.

Getting Started

Clone this repository:

git clone https://github.com/docomoinnovations/d3-horizon-chart.git

Install dependencies:

npm install

Build library:

npm run build

Then, the library will be built as d3-horizon-chart.js under dist folder.

To use it, include the library on the web page:

<script src="/path/to/d3-horizon-chart.js"></script>

To draw a horizon chart with HorizonChart class:

const horizonChart = new HorizonChart
horizonChart.setTitle('Sample Chart')
horizonChart.setDataSet(dataSet) // dataSet should be [Date, number][]
horizonChart.setSelector('#horizon-chart')
horizonChart.draw()

The horizon chart looks like:

Restriction

• The library doesn't support negative value as y axis. All values need to be positive.