{"id":16545700,"url":"https://github.com/geekplux/markvis-line","last_synced_at":"2025-04-11T16:14:41.585Z","repository":{"id":57291459,"uuid":"96563069","full_name":"geekplux/markvis-line","owner":"geekplux","description":"Line chart generator for markvis in browser and node.js.","archived":false,"fork":false,"pushed_at":"2018-11-28T16:37:19.000Z","size":213,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T12:21:43.633Z","etag":null,"topics":["d3","d3-node","markvis","visualization"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geekplux.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-07T17:56:55.000Z","updated_at":"2021-03-27T11:53:21.000Z","dependencies_parsed_at":"2022-08-27T16:51:22.506Z","dependency_job_id":null,"html_url":"https://github.com/geekplux/markvis-line","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geekplux%2Fmarkvis-line","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geekplux%2Fmarkvis-line/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geekplux%2Fmarkvis-line/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geekplux%2Fmarkvis-line/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geekplux","download_url":"https://codeload.github.com/geekplux/markvis-line/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248217146,"owners_count":21066633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3","d3-node","markvis","visualization"],"created_at":"2024-10-11T19:07:21.551Z","updated_at":"2025-04-11T16:14:41.546Z","avatar_url":"https://github.com/geekplux.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## LineChart\n\n\u003e Line chart generator for [markvis](https://github.com/geekplux/markvis) in browser and node.js.\n\n[![NPM version](https://img.shields.io/npm/v/markvis-line.svg?style=flat-square)](https://npmjs.com/package/markvis-line) [![NPM downloads](https://img.shields.io/npm/dm/markvis-line.svg?style=flat-square)](https://npmjs.com/package/markvis-line) [![Build](https://travis-ci.org/geekplux/markvis-line.svg?style=flat-square)](https://travis-ci.org/geekplux/markvis-line) [![Coverage](https://coveralls.io/repos/github/geekplux/markvis-line/badge.svg?style=flat-square)](https://coveralls.io/github/geekplux/markvis-line) [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000\u0026style=flat-square)](https://geekplux.github.io/donate)\n\n## Install\n\n```bash\nnpm install markvis-line --save\n\nor use yarn\n\nyarn add markvis-line --save\n```\n\n## Usage\n\n```js\nconst markvisLine = require('markvis-line');\nconst line = markvisLine({ data, d3, d3node })\n```\n\nCheck out the [example](./example) for usage.\n\n#### Output the visualization result to a image\n\n```\nnpm run example\n```\n\n#### Output Preview (png):\n\n![chart](./example/output.png)\n\n\n## API\n\n### markvisLine({ data, d3, d3node[, selector, container, style] })\n\n#### options\n\n##### data\n\n- Type: `Array`\n\nData from file or web processed by d3 library.\n\n##### d3\n\n- Type: `Object`\n\n[d3](https://github.com/d3/d3) library which used in **browser** environment.\n\n##### d3node\n\n- Type: `Object`\n\n[d3-node](https://github.com/d3-node/d3-node) constructor which used in **node** environment.\n\n##### selector\n\n- Type: `String`\n- Default: `'#chart'`\n\nDOM selector in container.\n\n##### container\n\n- Type: `String`\n- Default: `\u003cdiv id=\"container\"\u003e\u003ch2\u003eLine Chart\u003c/h2\u003e\u003cdiv id=\"chart\"\u003e\u003c/div\u003e\u003c/div\u003e`\n\nDOM contained the visualization result.\n\n##### style\n\n- Type: `String`\u003cbr\u003e\n- Default: `''`\n\nLine chart style.\n\n##### width\n\n- Type: `Number`\u003cbr\u003e\n- Default: `960`\n\nSVG width for line chart.\n\n##### height\n\n- Type: `Number`\u003cbr\u003e\n- Default: `500`\n\nSVG height for line chart.\n\n##### responsive\n\n- Type: `boolean`\u003cbr\u003e\n- Default: `false`\n\nWhether 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.\n\n##### margin\n\n- Type: `Object`\u003cbr\u003e\n- Default: `{ top: 20, right: 20, bottom: 20, left: 30 }`\n\nMargin of the first \u003cg\u003e wrapper in SVG, usually used to add axis.\n\n##### lineWidth\n\n- Type: `Number`\u003cbr\u003e\n- Default: `1.5`\n\nWidth of line.\n\n##### lineColor\n\n- Type: `string`\u003cbr\u003e\n- Default: `steelblue`\n\nColor of line.\n\n##### showXAxis\n\n- Type: `boolean`\u003cbr\u003e\n- Default: `true`\n\nWhether to show the X axis.\n\n##### showYAxis\n\n- Type: `boolean`\u003cbr\u003e\n- Default: `true`\n\nWhether to show the Y axis.\n\n##### showValues\n\n- Type: `boolean`\u003cbr\u003e\n- Default: `true`\n\nWhether to show values above each point.\n\n##### showDots\n\n- Type: `boolean`\n- Default: `true`\n\nWhether to show dots at each point.\n\n##### dotAttrs\n\n- Type: `Object`\u003cbr\u003e\n- Default: `{}`\n\nAttributes set on each dot element (only if `showDots` is `true`).\n\n##### isCurve\n\n- Type: `boolean`\u003cbr\u003e\n- Default: `true`\n\nWhether the line chart is curve.\n\n##### export\n\n- Type: `boolean`\u003cbr\u003e\n- Default: `false`\n\nWhether to export to a PNG image.\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n\n### LICENSE\n\n**markvis-line** © [geekplux](https://github.com/geekplux), Released under the [MIT](./LICENSE) License.\u003cbr\u003e\nAuthored and maintained by geekplux with help from contributors ([list](https://github.com/geekplux/markvis/contributors)).\n\n\u003e [geekplux.com](http://geekplux.com) · GitHub [@geekplux](https://github.com/geekplux) · Twitter [@geekplux](https://twitter.com/geekplux)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeekplux%2Fmarkvis-line","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeekplux%2Fmarkvis-line","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeekplux%2Fmarkvis-line/lists"}