Line chart generator for markvis in browser and node.js.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

LineChart

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

NPM version NPM downloads Build Coverage donate

Install

npm install markvis-line --save

or use yarn

yarn add markvis-line --save

Usage

const markvisLine = require('markvis-line');
const line = markvisLine({ data, d3, d3node })

Check out the example for usage.

Output the visualization result to a image

npm run example

Output Preview (png):

chart

API

markvisLine({ 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: Object

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>Line Chart</h2><div id="chart"></div></div>

DOM contained the visualization result.

style
  • Type: String
  • Default: ''

Line chart style.

width
  • Type: Number
  • Default: 960

SVG width for line chart.

height
  • Type: Number
  • Default: 500

SVG height for line 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: 30 }

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

lineWidth
  • Type: Number
  • Default: 1.5

Width of line.

lineColor
  • Type: string
  • Default: steelblue

Color of line.

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 point.

showDots
  • Type: boolean
  • Default: true

Whether to show dots at each point.

dotAttrs
  • Type: Object
  • Default: {}

Attributes set on each dot element (only if showDots is true).

isCurve
  • Type: boolean
  • Default: true

Whether the line chart is curve.

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-line © geekplux, Released under the MIT License.
Authored and maintained by geekplux with help from contributors (list).

geekplux.com · GitHub @geekplux · Twitter @geekplux