Bar chart generator for markvis in browser and node.js.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
dist
example
src
.babelrc
.gitignore
.travis.yml
LICENSE
README.md
package.json
yarn.lock

README.md

BarChart

Bar chart generator for markvis in browser and node.js.

NPM version NPM downloads Build Coverage donate

Install

npm install markvis-bar --save

or use yarn

yarn add markvis-bar --save

Usage

const markvisBar = require('markvis-bar');
const bar = markvisBar({ data, d3, d3node })

Check out the example for usage.

Output the visualization result to a PNG image

npm run example

Output Preview (png):

chart

API

markvisBar({ data, d3, d3node[, selector, container, style]})

options

data
  • Type: Array

Data from file or web processed by d3 library.

d3
  • Type: Object

d3 library which used in browser environment.

d3node
  • Type: Function

d3-node constructor which used in node environment.

selector
  • Type: String
  • Default: '#chart'

DOM selector in container.

container
  • Type: String
  • Default: <div id="container"><h2>Bar Chart</h2><div id="chart"></div></div>

DOM contained the visualization result.

style
  • Type: String
  • Default:
.bar {fill: steelblue;}
.bar:hover {fill: brown;}

Bar chart style.

barAttrs
  • Type: Object
  • Default: {}

Attributes set on each bar element.

width
  • Type: Number
  • Default: 960

SVG width for bar chart.

height
  • Type: Number
  • Default: 500

SVG height for bar chart.

responsive
  • Type: boolean
  • Default: false

Whether the chart should be automatically resized to fit its container. If true, width and height options are used for the initial sizing/SVG viewBox size.

margin
  • Type: Object
  • Default: { top: 20, right: 20, bottom: 20, left: 20 }

Margin of the first wrapper in SVG, usually used to add axis.

barColor
  • Type: string
  • Default: steelblue

Color of bar.

barHoverColor
  • Type: string
  • Default: brown

Color of bar hovered.

showXAxis
  • Type: boolean
  • Default: true

Whether to show the X axis.

showYAxis
  • Type: boolean
  • Default: true

Whether to show the Y axis.

showValues
  • Type: boolean
  • Default: true

Whether to show values above each bar.

export
  • Type: boolean
  • Default: false

Whether to export to a PNG image.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

LICENSE

markvis-bar © geekplux, Released under the MIT License.
Authored and maintained by geekplux with help from contributors (list).

geekplux.com · GitHub @geekplux · Twitter @geekplux