{"id":13810047,"url":"https://github.com/dmtrbrl/vue-trend-chart","last_synced_at":"2025-05-14T10:31:39.100Z","repository":{"id":34035788,"uuid":"166041544","full_name":"dmtrbrl/vue-trend-chart","owner":"dmtrbrl","description":"Simple trend charts for Vue.js","archived":true,"fork":false,"pushed_at":"2022-11-26T23:04:56.000Z","size":1709,"stargazers_count":260,"open_issues_count":0,"forks_count":29,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-03T12:37:43.550Z","etag":null,"topics":["chart","line-charts","svg-chart","trends","vue","vue-component"],"latest_commit_sha":null,"homepage":"https://dmtrbrl.github.io/vue-trend-chart/","language":"JavaScript","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/dmtrbrl.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":"2019-01-16T13:05:18.000Z","updated_at":"2025-02-28T03:02:38.000Z","dependencies_parsed_at":"2023-01-15T04:06:57.215Z","dependency_job_id":null,"html_url":"https://github.com/dmtrbrl/vue-trend-chart","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrbrl%2Fvue-trend-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrbrl%2Fvue-trend-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrbrl%2Fvue-trend-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrbrl%2Fvue-trend-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmtrbrl","download_url":"https://codeload.github.com/dmtrbrl/vue-trend-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254120624,"owners_count":22018024,"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":["chart","line-charts","svg-chart","trends","vue","vue-component"],"created_at":"2024-08-04T02:00:44.091Z","updated_at":"2025-05-14T10:31:38.613Z","avatar_url":"https://github.com/dmtrbrl.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Charts"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/dmtrbrl/vue-trend-chart/master/media/vtc-logo.png\" width=\"230\" alt=\"Vue Trend\"\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Vue%202-v0.15.3-green.svg\" /\u003e \u003cimg src=\"https://img.shields.io/badge/Vue%203-v^0.17.x-green.svg\" /\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://dmtrbrl.github.io/vue-trend-chart/\"\u003eLive Demo\u003c/a\u003e\n\u003c/div\u003e\n\n## :cd: Installation\n\n```shell\nnpm i vue-trend-chart\n```\n\n## :rocket: Usage\n\n```js\nimport TrendChart from \"vue-trend-chart\";\n\napp.use(TrendChart);\n```\n\n_Example:_\n\n```html\n\u003cTrendChart\n  :datasets=\"[\n    {\n      data: [10, 50, 20, 100, 40, 60, 80],\n      smooth: true,\n      fill: true\n    }\n  ]\"\n  :grid=\"{\n     verticalLines: true,\n     horizontalLines: true\n  }\"\n  :labels=\"{\n     xLabels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n     yLabels: 5\n  }\"\n  :min=\"0\"\u003e\n\u003c/TrendChart\u003e\n```\n\n## :wrench: Props\n\n### **`datasets`**\n\n**Required**  \nType: **Array**\n\n_Array of objects with [properties for each dataset](#chart_with_upwards_trend-dataset-props)._\n\n### **`grid`**\n\nType: **Object**\n\n_[Grid properties](#hash-grid-props)_\n\n### **`labels`**\n\nType: **Object**\n\n_[Labels properties](#abc-labels-props)_\n\n### **`min`**\n\nType: **Number**  \nDefault: min value from datasets\n\n### **`max`**\n\nType: **Number**  \nDefault: max value from datasets\n\n### **`padding`**\n\nType: **String**  \nDefault: \"5\"\n\n*If you set a large *stroke-width* on your lines, you may notice that it gets \"cropped\" towards the edges. It's similar to \"padding\" CSS property but without specifying units.*\n\nExamples:  \n`\"5\"` apply to all four sides  \n`\"5 10\"` vertical | horizontal  \n`\"5 15 10\"` top | horizontal | bottom  \n`\"5 10 15 20\"` top | right | bottom | left\n\n### **`interactive`**\n\nType: **Boolean**  \nDefault: **false**\n\n_Allows to set onmousemove interaction. Set to `true` to enable._\n\n## :zap: Events\n\n### **`mouse-move`**\n\n_Callback function for **onmouseover** interaction.  \nReceives an **object** `{index: Number, data: Array}` parameter based on current active line.  \nThis function has no effect if `interactive` isn't set to `true`._\n\n## :chart_with_upwards_trend: Dataset Props\n\nChart line (curve) properties\n\n### **`data`**\n\nType: **Number|Object**\n\n_Example: `[70, 100, 400, 180, 100]` or `[{ value: 70 }, { value: 100 }, { value: 400 }, { value: 180 }, { value: 100 }]`  \nFor object type you can also add other properties to use them in `interactive` mode._\n\n### **`className`**\n\nType: **String**\n\n_Allows to append custom class to chart line for future styling._\n\n### **`smooth`**\n\nType: **Boolean**  \nDefault: **false**\n\n_Allows the peaks to be 'rounded' out._\n\n### **`stroke`**\n\nType: **Boolean**  \nDefault: **true**\n\n_If `false`, the line is not drawn for this dataset._\n\n### **`fill`**\n\nType: **Boolean**  \nDefault: **false**\n\n_Allows to fill the area under the line. Set to `true` to enable._\n\n### **`showPoints`**\n\nType: **Boolean**  \nDefault: **false**\n\n_Allows to show points. Set to `true` to enable._\n\n## :hash: Grid Props\n\n### **`verticalLines`**\n\nType: **Boolean**  \nDefault: false\n\n_Allows to show vertical gridlines. Set to `true` to enable._\n\n### **`verticalLinesNumber`**\n\nType: **Number**  \nDefault: number of `xLabels`\n\n_Allows to set custom number of vertical gridlines.  \nThis prop has no effect if `verticalLines` isn't set to `true`._\n\n### **`horizontalLines`**\n\nType: **Boolean**  \nDefault: false\n\n_Allows to show horizontal gridlines. Set to `true` to enable._\n\n### **`horizontalLinesNumber`**\n\nType: **Number**  \nDefault: number of `yLabels`\n\n_Allows to set custom number of horizontal gridlines.  \nThis prop has no effect if `horizontalLines` isn't set to `true`._\n\n## :abc: Labels Props\n\n### **`xLabels`**\n\nType: **Array**\n\n_X axis labels.  \nExample: `[\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"]`_\n\n### **`yLabels`**\n\nType: **Number**\n\n_Number of Y axis labels. Labels text is based on data values._\n\n### **`yLabelsTextFormatter`**\n\nType: **Function**\n\n_Allows to format Y axis labels text.  \nExample: `val =\u003e \"$\" + Math.round(val * 100) / 100`.  \nThis function has no effect if `yLabels` prop has no value._\n\n## :art: Styling\n\nJust use CSS to style your charts.\n\n_Here is an example of a tree structure with available class names:_\n\n```html\n\u003csvg class=\"vtc\"\u003e\n  \u003cg class=\"grid\"\u003e\n    \u003cg class=\"vertical\"\u003e\n      \u003cline class=\"line\"\u003e\u003c/line\u003e\n      ...\n    \u003c/g\u003e\n    \u003cg class=\"horizontal\"\u003e\n      \u003cline class=\"line\"\u003e\u003c/line\u003e\n      ...\n    \u003c/g\u003e\n  \u003c/g\u003e\n\n  \u003cg class=\"labels\"\u003e\n    \u003cg class=\"x-labels\"\u003e\n      \u003cg class=\"label\"\u003e\n        \u003ctext\u003e\u003c/text\u003e\n      \u003c/g\u003e\n      ...\n    \u003c/g\u003e\n    \u003cg class=\"y-labels\"\u003e\n      \u003cg class=\"label\"\u003e\n        \u003ctext\u003e\u003c/text\u003e\n      \u003c/g\u003e\n      ...\n    \u003c/g\u003e\n  \u003c/g\u003e\n\n  \u003cg class=\"curve\"\u003e\n    \u003cpath class=\"fill\"\u003e\u003c/path\u003e\n    \u003cpath class=\"stroke\"\u003e\u003c/path\u003e\n    \u003cg class=\"points\"\u003e\n      \u003ccircle class=\"point\"\u003e\u003c/circle\u003e\n      ...\n    \u003c/g\u003e\n  \u003c/g\u003e\n  ...\n\n  \u003cline class=\"active-line\"\u003e\u003c/line\u003e\n\u003c/svg\u003e\n```\n\n## :hammer: Development\n\n```shell\nnpm install\nnpm run dev\n```\n\n## :two_hearts: Contributing\n\nPull requests are welcome!\n\n## :lock: License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmtrbrl%2Fvue-trend-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmtrbrl%2Fvue-trend-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmtrbrl%2Fvue-trend-chart/lists"}