Newman's Personal Motorcade

    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

    Install

    npm i markvis-line

    DownloadsWeekly Downloads

    17

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    234 kB

    Total Files

    16

    Last publish

    Collaborators

    • geekplux