{"id":21956737,"url":"https://github.com/juijs/vue-graph","last_synced_at":"2025-07-22T15:04:18.392Z","repository":{"id":37752154,"uuid":"138751361","full_name":"juijs/vue-graph","owner":"juijs","description":"⚡️ Vue components based on the JUI chart available in Vue.js","archived":false,"fork":false,"pushed_at":"2022-12-10T16:32:34.000Z","size":4860,"stargazers_count":128,"open_issues_count":26,"forks_count":17,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-04-23T16:44:36.556Z","etag":null,"topics":["animation","canvas","svg","vue-charts","vue-components","vuejs"],"latest_commit_sha":null,"homepage":"https://codepen.io/collection/nWpqoB/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juijs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-26T14:39:14.000Z","updated_at":"2024-01-13T23:58:29.000Z","dependencies_parsed_at":"2023-01-26T09:31:31.144Z","dependency_job_id":null,"html_url":"https://github.com/juijs/vue-graph","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juijs%2Fvue-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juijs%2Fvue-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juijs%2Fvue-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juijs%2Fvue-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juijs","download_url":"https://codeload.github.com/juijs/vue-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247704571,"owners_count":20982298,"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":["animation","canvas","svg","vue-charts","vue-components","vuejs"],"created_at":"2024-11-29T08:38:08.448Z","updated_at":"2025-04-07T18:14:24.760Z","avatar_url":"https://github.com/juijs.png","language":"JavaScript","funding_links":[],"categories":["UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["图表","UI Components","Charts"],"readme":"# vue-graph\n\n\u003e A vue component library based on the [JUI charts](http://jui.io/?p=chart) available in vuejs.\n\n[![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com)\n[![forthebadge](http://forthebadge.com/images/badges/made-with-vue.svg)](http://forthebadge.com)\n[![forthebadge](http://forthebadge.com/images/badges/uses-js.svg)](http://forthebadge.com)\n\n## Installation\n\n### NPM\n```bash\nnpm install --save vue-graph\n```\n\n### Browser\nJust download `dist/vue-graph.js` and include it in your HTML file:\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.rawgit.com/juijs/vue-graph/2216ae2f/dist/vue-graph.js\"\u003e\u003c/script\u003e\n```\n\n### ES Modules\n\n##### Plug-In\n\n```js\nimport Vue from 'vue'\nimport VueGraph from 'vue-graph'\n\nVue.use(VueGraph)\n```\n\n##### Components\n\n```js\nimport Vue from 'vue'\nimport GraphLine3D from 'vue-graph/src/components/line3d.js'\nimport NoteWidget from 'vue-graph/src/widgets/note.js'\nimport LegendWidget from 'vue-graph/src/widgets/legends.js'\n\nVue.component(GraphLine3D.name, GraphLine3D);\nVue.component(NoteWidget.name, NoteWidget);\nVue.component(LegendWidget.name, LegendWidget);\n```\n\n## Usage\n\nUnlike other chart components, vue-graph have child nodes in the chart called widgets. The widget is used as an additional function of charts such as chart title, legend, tooltip.\n\nThe following is a link you can test with [CodePen](https://codepen.io/seogi1004/pen/QBJREN).\n\n\u003cp align=\"center\"\u003e \n\u003cimg src=\"https://github.com/juijs/vue-graph/blob/master/images/treemap.png\"\u003e\n\u003c/p\u003e\n\n```html\n\u003cdiv id=\"app\"\u003e\n    \u003cgraph-treemap\n            :width=\"800\"\n            :height=\"800\"\n            :text-align=\"'right'\"\n            :text-vertical-align=\"'bottom'\"\n            :colors=\"[ '#EC2500', '#ECE100', '#EC9800', '#9EDE00' ]\"\n            :values=\"values\"\u003e\n        \u003cnote :text=\"'Treemap Chart'\" :align=\"'left'\"\u003e\u003c/note\u003e\n        \u003ctooltip :position=\"'top'\"\u003e\u003c/tooltip\u003e\n    \u003c/graph-treemap\u003e\n\u003c/div\u003e\n```\nIn the following code, the chart is prefixed with 'graph-' for each type. The widget can be added as a child node of the chart, unlike a chart, was named without a prefix.\n\nThe vue-graph can be combined with charts and widgets for a variety of visualizations. This is a very flexible and scalable structure.\n```js\nvar vm = new Vue({\n    el: \"#app\",\n    data: {\n        values: [\n            [ '0', 'Apples', -1 ],\n            [ '0.0', 'Anne', 5 ],\n            [ '0.1', 'Rick', 3 ],\n            [ '0.2', 'Peter', 4 ],\n            [ '1', 'Bananas', -1 ],\n            [ '1.0', 'Anne', 4 ],\n            [ '1.1', 'Rick', 10 ],\n            [ '1.2', 'Peter', 1 ],\n            [ '2', 'Oranges', -1 ],\n            [ '2.0', 'Anne', 1 ],\n            [ '2.1', 'Rick', 3 ],\n            [ '2.2', 'Peter', 3 ],\n            [ '3', 'Susanne', 2 ],\n        ]\n    }\n});\n```\n\n## Implemented chart list\n\nThere are many charts that have not yet been migrated. We are going to continue.\n\n - [Bar Chart](https://codepen.io/seogi1004/pen/WKrVLx)\n - [Bar Chart (Reverse)](https://codepen.io/seogi1004/pen/xJZvva)\n - [Comparison Bar Chart](https://codepen.io/seogi1004/pen/djvoov)\n - [Stack Bar Chart](https://codepen.io/seogi1004/pen/djMbGE)\n - [Stack Bar Chart (Reverse)](https://codepen.io/seogi1004/pen/oMxvLR)\n - [Stack Bar Chart (Full Mode)](https://codepen.io/seogi1004/pen/xJVKVm)\n - [Range Bar Chart](https://codepen.io/seogi1004/pen/QBvZjr)\n - [Range Bar Chart (Reverse)](https://codepen.io/seogi1004/pen/RBVerK)\n - [Line Chart](https://codepen.io/seogi1004/pen/jpqNPm)\n - [Line Chart (Reverse)](https://codepen.io/seogi1004/pen/MBygar)\n - [Line Chart (Date+Block)](https://codepen.io/seogi1004/pen/qyZWEL)\n - [Line Chart (Time+Range)](https://codepen.io/seogi1004/pen/WKxqRd)\n - [3D-Bar Chart](https://codepen.io/seogi1004/pen/GBoVPV)\n - [3D-Line Chart](https://codepen.io/seogi1004/pen/PBZMEr)\n - [Scatter Chart](https://codepen.io/seogi1004/pen/YjqKym)\n - [Bubble Chart](https://codepen.io/seogi1004/pen/qyZWBL)\n - [Area Chart](https://codepen.io/seogi1004/pen/qybeMy)\n - [Area Chart (Date+Block)](https://codepen.io/seogi1004/pen/zLwmrV)\n - [Area Chart (Time+Range)](https://codepen.io/seogi1004/pen/WKjawJ)\n - [Range Area Chart](https://codepen.io/seogi1004/pen/bjrmbB)\n - [Range Area Chart (Date+Block)](https://codepen.io/seogi1004/pen/oMeagR)\n - [Range Area Chart (Time+Range)](https://codepen.io/seogi1004/pen/xJLyxQ)\n - [Comparison Area Chart](https://codepen.io/seogi1004/pen/PdGXMZ)\n - [Pie Chart](https://codepen.io/seogi1004/pen/xJgxoN)\n - [Pie Chart (Donut)](https://codepen.io/seogi1004/pen/oMBgNg)\n - [Treemap Chart](https://codepen.io/seogi1004/pen/QBJREN)\n - [Equalizer Chart (+Animation)](https://codepen.io/seogi1004/pen/ReJEyd)\n - [Active Bubble Chart](https://codepen.io/seogi1004/pen/zmbNxo)\n - [Bubble Cloud Chart](https://codepen.io/seogi1004/pen/WaWZOz)\n \n## Props\n\n### Common\n\n| Name | Type | Required | Watch | Default | Description |\n| ---- | ---- | -------- | ----- | --------| ----------- |\n| theme | String | false | false | `classic` | Supports a total of five themes (**classic**, **dark**) |\n| styles | Object | false | false | `undefined` | Customize the style of the chart elements you want in key-value format ([Classic](https://github.com/juijs/jui-chart/blob/master/src/theme/classic.js), [Dark](https://github.com/juijs/jui-chart/blob/master/src/theme/dark.js)) |\n| colors | Array, Function | false | false | `undefined` | Options to change the list of colors defined by chart theme ([Style Tab](http://chartplay.jui.io/)) |\n| clip | Boolean | false | false | false | Option to cut if the drawing element is out of the chart range |\n| format | Function | false | true | `undefined` | A callback function that allows you to customize the axis values of the chart |\n| width | Number | true | true | `undefined` | The width of the chart |\n| height | Number | true | true | `undefined` | The height of the chart |\n| paddingTop | Number | false | false | 50 | Top padding of the chart |\n| paddingRight | Number | false | false | 50 | Right padding of the chart |\n| paddingBottom | Number | false | false | 50 | Bottom padding of the chart |\n| paddingLeft | Number | false | false | 50 | Left padding of the chart |\n| focusStart | Number | false | false | -1 | The starting index of the focus area (the criterion is slightly different depending on the type of axis) |\n| focusEnd | Number | false | false | -1 | The ending index of the focus area (the criterion is slightly different depending on the type of axis) |\n| labels | Array | false | true | `undefined` | Label of chart data |\n| values | Array | false | true | `undefined` | It is a chart data value, and the format may be different for each chart type |\n\n### Common (Animation)\n\n| Name | Type | Required | Watch | Default | Description |\n| ---- | ---- | -------- | ----- | --------| ----------- |\n| renderInterval | Number | false | false | 200 | Rendering interval (ms) |\n| renderHandler | Function | false | false | `null` | Callback function that can post-process when rendering a chart |\n| renderStop | Boolean | false | true | false | Pause or resume chart rendering |\n\n### Common (X-Y Axis)\n\n| Name | Type | Required | Watch | Default | Description |\n| ---- | ---- | -------- | ----- | --------| ----------- |\n| axisMin | Number | false | false | 0 | Miniimum value for the chart axis |\n| axisMax | Number | false | false | 0 | Maximum value for the chart axis |\n| axisStep | Number | false | false | 10 | Display interval of chart axis value |\n| axisXStyle | String | false | false | `solid` | Line style for chart x-axis area (**solid**, **dotted**, **gradient**, **none**, **hidden**) |\n| axisYStyle | String | false | false | `solid` | Line style for chart y-axis area (**solid**, **dotted**, **gradient**, **none**, **hidden**) \n| axisXPosition | String | false | false | `bottom` | Chart x-axis position (**bottom**, **top**) |\n| axisYPosition | String | false | false | `left` | Chart y-axis position (**left**, **right**) |\n| axisReverse | Boolean | false | false | false | Replace the x and y axis positions |\n| axisFullMode | Boolean | false | false | false | Draw a chart drawing element full of the axis label area. |\n| axisInterval | Number | false | false | 1000 * 60 * 60 | It is the label value display interval of the date type (Unit: ms) |\n| axisFormat | String, Function | false | false | `HH` | It is the label value display format of the date type |\n| textRotateX | Number | false | false | 0 | The tilt angle of the x-axis text |\n| textRotateY | Number | false | false | 0 | The tilt angle of the y-axis text |\n\n### Props by charts\n\n#### [graph-bar](https://codepen.io/seogi1004/pen/WKrVLx), [graph-comparison-bar](https://codepen.io/seogi1004/pen/djvoov)\n \n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| fixedSize | Number | false | false | 0 | Fixed width of bar (or height) |\n| minValue | Number | false | false | 0 | When the value is very small, the minimum size of the bar  |\n| barMargin | Number | false | false | 2 | Margins between bars and bars |\n| barPadding | Number | false | false | 1 | Inside padding inside the bar |\n| activeIndex | Number | false | true | `undefined` | The index of the bar to activate |\n| activeEvent | String | false | false | `undefined` | Event type to activate the bar |\n| display | String | false | false | `undefined` | Options that display the value of the bar (**max**, **min**, **all**) |\n\n#### [graph-bar3d](https://codepen.io/seogi1004/pen/GBoVPV)\n \n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| names | Array | true | false | `undefined` | Name of the z-axis data key |\n| barPadding | Number | false | false | 20 | Inside padding inside the bar  |\n\n#### [graph-stackbar](https://codepen.io/seogi1004/pen/djMbGE)\n \n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| fixedSize | Number | false | false | 0 | Fixed width of bar (or height) |\n| barMargin | Number | false | false | 2 | Margins between bars and bars |\n| barPadding | Number | false | false | 1 | Inside padding inside the bar |\n| activeIndex | Number | false | true | `undefined` | The index of the bar to activate |\n| activeEvent | String | false | false | `undefined` | Event type to activate the bar |\n| display | String | false | false | `undefined` | Options that display the value of the bar (**max**, **min**, **all**) |\n| connectedLine | Boolean | false | false | false | Options that show the line connecting the bars and bars |\n| fullMode | Boolean | false | false | false | Option to change to full stack bar |\n| showText | Boolean | false | false | false | Options to show the percentage value in the bar |\n\n#### [graph-rangebar](https://codepen.io/seogi1004/pen/QBvZjr)\n \n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| barMargin | Number | false | false | 2 | Margins between bars and bars |\n| barPadding | Number | false | false | 1 | Inside padding inside the bar |\n\n#### [graph-line](https://codepen.io/seogi1004/pen/jpqNPm), [graph-line-dateblock](https://codepen.io/seogi1004/pen/qyZWEL), [graph-line-timerange](https://codepen.io/seogi1004/pen/WKxqRd)\n \n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| shape | String | false | false | `normal` | It is the shape of the line (**normal**, **curve**, **step**) |\n| activeIndex | Number | false | false | `undefined` | The index of the line to activate |\n| activeEvent | String | false | false | `undefined` | Event type to activate the line |\n| display | String | false | false | `undefined` | Options that display the value of the line (**max**, **min**, **all**) |\n| opacity | Number | false | false | `undefined` | The transparency of the line (Value between 0 and 1) |\n\n#### [graph-line3d](https://codepen.io/seogi1004/pen/PBZMEr)\n \n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| names | Array | true | false | `undefined` | Name of the z-axis data key |\n| linePadding | Number | false | false | 20 | Inside padding inside the line  |\n\n#### [graph-bubble](https://codepen.io/seogi1004/pen/qyZWBL)\n \n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| minSize | Number | false | false | 5 | Minimum size of bubble |\n| maxSize | Number | false | false | 30 | Maximum size of bubble |\n| showText | Boolean | false | false | false | Options to show the percentage value in the bubble |\n| activeEvent | String | false | false | `undefined` | Event type to activate the bubble |\n\n#### [graph-area](https://codepen.io/seogi1004/pen/qybeMy), [graph-area-dateblock](https://codepen.io/seogi1004/pen/zLwmrV), [graph-area-timerange](https://codepen.io/seogi1004/pen/WKjawJ), [graph-comparison-area](https://codepen.io/seogi1004/pen/PdGXMZ)\n \n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| shape | String | false | false | `normal` | It is the shape of the area (**normal**, **curve**, **step**) |\n| opacity | Number | false | false | `undefined` | The transparency of the area (Value between 0 and 1) |\n| borderLine | Boolean | false | false | true | Show lines on the border of the area |\n\n#### [graph-scatter](https://codepen.io/seogi1004/pen/YjqKym)\n \n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| shape | String | false | false | `circle` | It is the shape of the scatter (**circle**, **triangle**, **rectangle**, **cross**) |\n| activeEvent | String | false | false | `undefined` | Event type to activate the scatter |\n| display | String | false | false | `undefined` | Options that display the value of the scatter (**max**, **min**, **all**) |\n| opacity | Number | false | false | `undefined` | The transparency of the scatter (Value between 0 and 1) |\n| size | Number | false | false | 7 | Size of scatter (Value between 0 and 1) |\n| hideZero | Boolean | false | false | false | Option to hide scatter when the value is 0 |\n\n#### [graph-pie](https://codepen.io/seogi1004/pen/xJgxoN)\n \n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| shape | String | false | false | `pie` | It is the shape of the pie (**pie**, **donut**) |\n| activeIndex | Number, Array | false | true | `undefined` | The index of the pie to activate |\n| activeEvent | String | false | false | `undefined` | Event type to activate the pie |\n| showTextType | String | false | false | `undefined` | Options that display the value of the pie (**inside**, **outside**) |\n| dataFormat | Function | false | true | `undefined` | Pie data format function |\n| showTotalValue | Boolean | false | false | `undefined` | Options that show total value in the center when the shape is donut |\n| strokeWidth | Number | false | false | 50 | When the shape is donut, set the stroke width |\n\n#### [graph-treemap](https://codepen.io/seogi1004/pen/QBJREN)\n \n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| showText | Boolean | false | false | false | Options to show the title in the treemap node |\n| textAlign | String | false | false | `center` | Horizontal alignment (**center**, **left**, **right**) |\n| textVerticalAlign | String | false | false | `top` | Vertical alignment (**top**, **bottom**, **middle**) |\n| titleDepth | Number | false | false | 1 | Sets the depth of the tree node to show the title |\n| nodeColor | Function | false | false | `undefined` | Set the color of the node to the callback function |\n\n#### [graph-equalizer](https://codepen.io/seogi1004/pen/ReJEyd)\n \n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| minValue | Number | false | false | 0 | When the value is very small, the minimum size of the bar  |\n| fixedSize | Number | false | false | 0 | Fixed width of bar (or height) |\n| barMargin | Number | false | false | 2 | Margins between bars and bars |\n| barPadding | Number | false | false | 1 | Inside padding inside the bar |\n| maxDivisions | Number | false | false | 5 | Maximum number of division bars |\n\n#### [graph-activebubble](https://codepen.io/seogi1004/pen/zmbNxo)\n \n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| gravity | Number | false | false | 0.2 | Sets the force to pull the bubble  |\n| radius | Number | false | false | 20 | Radius value of the bubble |\n| opacity | Number | false | false | 1 | Transparency value of the bubble |\n\n\n### Props by widgets\n\n#### note\nA widget that can display text in a chart.\n\n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| text | String | true | true |  | Text to display |\n| align | String | false | true | `center` | Horizontal alignment (**center**, **left**, **right**) |\n| verticalAlign | String | true | false | `top` | Vertical alignment (**top**, **bottom**, **middle**) |\n| dx | Number | false | false | 0 | x-axis position adjustment value |\n| dy | Number | false | false | 0 | y-axis position adjustment value |\n| size | Number | false | false | `undefined` | Font size |\n| color | String | false | false | `undefined` | Font color |\n\n#### tooltip\nWidget showing chart element values.\n\n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| names | String | true | true |  | Name to map to value type |\n| position | String | false | false | `top` | Vertical alignment (**top**, **bottom**, **left**, **right**) |\n| showAnchor | Boolean | false | false | true | Options to display anchor |\n\n#### legends\nWidget that represents the chart legend.\n\n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| names | String | true | true |  | Name to map to value type |\n| align | String | false | false | `center` | Horizontal alignment (**center**, **left**, **right**) |\n| position | String | false | false | `bottom` | Vertical alignment (**top**, **bottom**, **left**, **right**) |\n| dx | Number | false | false | 0 | x-axis position adjustment value |\n| dy | Number | false | false | 0 | y-axis position adjustment value |\n| filter | Boolean | false | false | false | Options to filter elements of a specific name |\n| colors | Array | false | false | `undefined` | Filtering element color by name |\n\n#### guideline\nWidget to help you see x-y axis values easily.\n\n| Name | Type | Required | Watch | Default | Description |\n| ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- |\n| tooltipX | Boolean | false | false | false | Guidelines for displaying x-axis values |\n| tooltipY | Boolean | false | false | true | Guidelines for displaying y-axis values |\n\n\n## Events\n\nThere are three types of events for the drawing object, outside and inside the axis area.\n - [Bar Chart (+Event)](https://codepen.io/seogi1004/pen/XBdErQ)\n\n```html\n\u003cdiv id=\"app\"\u003e\n    \u003cgraph-bar\n            :width=\"600\"\n            :height=\"400\"\n            :axis-min=\"0\"\n            :axis-max=\"50\"\n            :labels=\"[ '1Q', '2Q', '3Q', '4Q' ]\"\n            :values=\"values\"\n            :active-event=\"'click'\"\n            @click=\"onClickBar\"\n            @outside#click=\"onClickOutside\"\n            @inside#click=\"onClickInside\"\u003e\n        \u003cnote :text=\"'Bar Chart (+Event)'\"\u003e\u003c/note\u003e\n    \u003c/graph-bar\u003e\n\u003c/div\u003e\n\u003cscript\u003e\nvar vm = new Vue({\n    el: \"#app\",\n    data: {\n        values: [\n            [ 10, 5, 5, 5 ],\n            [ 40, 10, 10, 10 ],\n            [ 30, 30, 30, 30 ]\n        ]\n    },\n    methods: {\n        onClickBar: function() {\n            console.log(arguments);\n            alert(\"onClickBar\");\n        },\n        onClickOutside: function() {\n            console.log(arguments);\n            alert(\"onClickOutside\");\n        },\n        onClickInside: function() {\n            console.log(arguments);\n            alert(\"onClickInside\");\n        }\n    }\n});\n\u003c/script\u003e\n```\n\nCommon events are shown in the table below.\n\n| Outside axis | Inside axis | Drawing object | Description |\n| ---------------- | -------------- | -------------- | ----------- |\n| outside#click | inside#click | click | |\n| outside#dblclick | inside#dblclick | dblclick | |\n| outside#rclick | inside#rclick | rclick | `contextmenu` |\n| outside#mouseover | inside#mouseover | mouseover | |\n| outside#mouseout | inside#mouseout | mouseout | |\n| outside#mousemove | inside#mousemove | mousemove | |\n| outside#mousedown | inside#mousedown | mousedown | |\n| outside#mouseup | inside#mouseup | mouseup | |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuijs%2Fvue-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuijs%2Fvue-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuijs%2Fvue-graph/lists"}