https://github.com/geekplux/markvis-line
Line chart generator for markvis in browser and node.js.
https://github.com/geekplux/markvis-line
d3 d3-node markvis visualization
Last synced: 10 months ago
JSON representation
Line chart generator for markvis in browser and node.js.
- Host: GitHub
- URL: https://github.com/geekplux/markvis-line
- Owner: geekplux
- License: mit
- Created: 2017-07-07T17:56:55.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-28T16:37:19.000Z (about 7 years ago)
- Last Synced: 2025-03-25T12:21:43.633Z (11 months ago)
- Topics: d3, d3-node, markvis, visualization
- Language: HTML
- Homepage:
- Size: 208 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## LineChart
> Line chart generator for [markvis](https://github.com/geekplux/markvis) in browser and node.js.
[](https://npmjs.com/package/markvis-line) [](https://npmjs.com/package/markvis-line) [](https://travis-ci.org/geekplux/markvis-line) [](https://coveralls.io/github/geekplux/markvis-line) [](https://geekplux.github.io/donate)
## Install
```bash
npm install markvis-line --save
or use yarn
yarn add markvis-line --save
```
## Usage
```js
const markvisLine = require('markvis-line');
const line = markvisLine({ data, d3, d3node })
```
Check out the [example](./example) for usage.
#### Output the visualization result to a image
```
npm run example
```
#### Output Preview (png):
## 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](https://github.com/d3/d3) library which used in **browser** environment.
##### d3node
- Type: `Object`
[d3-node](https://github.com/d3-node/d3-node) constructor which used in **node** environment.
##### selector
- Type: `String`
- Default: `'#chart'`
DOM selector in container.
##### container
- Type: `String`
- Default: `
Line Chart
`
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](https://github.com/geekplux), Released under the [MIT](./LICENSE) License.
Authored and maintained by geekplux with help from contributors ([list](https://github.com/geekplux/markvis/contributors)).
> [geekplux.com](http://geekplux.com) · GitHub [@geekplux](https://github.com/geekplux) · Twitter [@geekplux](https://twitter.com/geekplux)