markvis-line

0.0.7 • Public • Published

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

Package Sidebar

Install

npm i markvis-line

Weekly Downloads

8

Version

0.0.7

License

MIT

Unpacked Size

234 kB

Total Files

16

Last publish

Collaborators

  • geekplux