Skip to content

kartoteket/d3by5-bar-chart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

d3by5-bar-chart

The d3by5-bar-chart is part of the d3by5 graph tools, this specific package will draw a pie chart based on Mike Bostocks Towards Reusable Charts

NOTE

This is an internal project, you are probably better off using somethin like C3. That said, just give it a try and contact us back if you have any issues (no capslock please).

USAGE

Building

Build the project by running

npm run build

This will output to the docs folder js/app.js is the application code

Running

The project is built with webpack and is bundled with webpack-dev-server.

run the server by issuing

npm start

This will start the server on http://localhost:8080 and serve files from docs

API

The bar chart uses the Base chart for all getters and setters, and adds the following methods for manipulating view and state.

  • anchor - {String} - the direction of the graph from where it is achored ('top' | 'bottom' | 'left' | 'right') (defaults to ('bottom'))
  • label - {String} - where to position the labels ('fit' | 'none' | 'axis')
  • barLayout - {String} - how to display multiple series ('stacked' | 'grouped')

EXAMPLE

All methods are chained, you can simply instanciate a new bar graph like this

import barchart from 'BarChart'

const chart = document.getElementById('.chart')
// create simple chart
new BarChart().width(520)
              .height(300)
              .margin(0,10,20,60)
              .data([{label:'coffee', values: 509}, {label:'tea', values: 1}])
              .draw(chart);

see the exaples in docs/index.html

Just run the app.

LICENCE

MIT