{"id":13535778,"url":"https://github.com/weizhenye/vue-highcharts","last_synced_at":"2025-04-12T20:44:02.724Z","repository":{"id":57396186,"uuid":"70497892","full_name":"weizhenye/vue-highcharts","owner":"weizhenye","description":":bar_chart: Highcharts component for Vue","archived":false,"fork":false,"pushed_at":"2020-09-18T17:49:08.000Z","size":46,"stargazers_count":412,"open_issues_count":0,"forks_count":53,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-04T00:09:12.671Z","etag":null,"topics":["highcharts","highmaps","highstock","vue"],"latest_commit_sha":null,"homepage":"","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/weizhenye.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":"2016-10-10T14:47:09.000Z","updated_at":"2025-03-15T20:58:30.000Z","dependencies_parsed_at":"2022-09-18T11:01:20.167Z","dependency_job_id":null,"html_url":"https://github.com/weizhenye/vue-highcharts","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weizhenye%2Fvue-highcharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weizhenye%2Fvue-highcharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weizhenye%2Fvue-highcharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weizhenye%2Fvue-highcharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weizhenye","download_url":"https://codeload.github.com/weizhenye/vue-highcharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631687,"owners_count":21136556,"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":["highcharts","highmaps","highstock","vue"],"created_at":"2024-08-01T09:00:26.992Z","updated_at":"2025-04-12T20:44:02.704Z","avatar_url":"https://github.com/weizhenye.png","language":"JavaScript","funding_links":[],"categories":["UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Component Collections","图表","UI Components","Charts"],"readme":"# vue-highcharts\n\n[![GitHub Action](https://github.com/weizhenye/vue-highcharts/workflows/CI/badge.svg)](https://github.com/weizhenye/vue-highcharts/actions)\n[![Coverage](https://badgen.net/codecov/c/github/weizhenye/vue-highcharts?icon=codecov)](https://codecov.io/gh/weizhenye/vue-highcharts)\n[![NPM version](https://badgen.net/npm/v/vue-highcharts?icon=npm)](https://www.npmjs.com/package/vue-highcharts)\n[![License](https://badgen.net/npm/license/vue-highcharts?icon=https://api.iconify.design/octicon:law.svg?color=white)](https://github.com/weizhenye/vue-highcharts/blob/master/LICENSE)\n[![File size](https://badgen.net/bundlephobia/minzip/vue-highcharts?icon=https://api.iconify.design/ant-design:file-zip-outline.svg?color=white)](https://bundlephobia.com/result?p=vue-highcharts)\n[![Download](https://badgen.net/npm/dm/vue-highcharts?icon=npm)](https://www.npmjs.com/package/vue-highcharts)\n[![jsDelivr](https://badgen.net/jsdelivr/hits/npm/vue-highcharts?icon=https://api.iconify.design/simple-icons:jsdelivr.svg?color=white)](https://www.jsdelivr.com/package/npm/vue-highcharts)\n\nHighcharts component for Vue.\n\n## Requirements\n\n* Vue \u003e= 3.0.0\n* Highcharts \u003e= 4.2.0\n\n## Installation\n\n```bash\nnpm i -S vue-highcharts\n```\n\nFor **Vue 2**, please run `npm i -S vue-highcharts@0.1`, and checkout document [here](https://github.com/weizhenye/vue-highcharts/tree/v0.1.0).\n\n## Usage\n\n### Registering globally\n\n```js\nimport { createApp } from 'vue';\nimport Highcharts from 'highcharts';\nimport VueHighcharts from 'vue-highcharts';\n\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.use(VueHighcharts, { Highcharts });\n// now \u003cHighcharts /\u003e is available in components\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eDirect \u003ccode\u003e\u0026lt;script\u0026gt;\u003c/code\u003e include\u003c/summary\u003e\n\n```html\n\u003cscript src=\"/path/to/vue/dist/vue.global.prod.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/highcharts/highcharts.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/vue-highcharts/dist/vue-highcharts.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nconst { createApp } = window.Vue;\nconst app = createApp();\napp.use(window.VueHighcharts['default'], { Highcharts: window.Highcharts });\n\u003c/script\u003e\n```\n\u003c/details\u003e\n\n### Highstock, Highmaps and any other add-ons\n\n```js\nimport { createApp } from 'vue';\nimport Highcharts from 'highcharts';\nimport VueHighcharts from 'vue-highcharts';\n\nimport App from './App.vue';\n\n// load these modules as your need\nimport loadStock from 'highcharts/modules/stock.js';\nimport loadMap from 'highcharts/modules/map.js';\nimport loadGantt from 'highcharts/modules/gantt.js';\nimport loadDrilldown from 'highcharts/modules/drilldown.js';\n// some charts like solid gauge require `highcharts-more.js`, you can find it in official document.\nimport loadHighchartsMore from 'highcharts/highcharts-more.js';\nimport loadSolidGauge from 'highcharts/modules/solid-gauge.js';\n\nloadStock(Highcharts);\nloadMap(Highcharts);\nloadGantt(Highcharts);\nloadDrilldown(Highcharts);\nloadHighchartsMore(Highcharts);\nloadSolidGauge(Highcharts);\n\nconst app = createApp(App);\napp.use(VueHighcharts, { Highcharts });\n// now \u003cHighcharts /\u003e, \u003cHighstock /\u003e, \u003cHighmaps /\u003e, \u003cHighchartsGantt /\u003e is available in components\n// drilldown and solid gauge are work with \u003cHighcharts /\u003e\n```\n\n### Registering in components\n\n```vue\n\u003ctemplate\u003e\n  \u003cHighcharts /\u003e\n  \u003cHighmaps /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Highcharts from 'highcharts';\nimport { createHighcharts } from 'vue-highcharts';\n\nimport loadMap from 'highcharts/modules/map.js';\n\nloadMap(Highcharts);\n\nexport default {\n  components: {\n    Highcharts: createHighcharts('Highcharts', Highcharts),\n    Highmaps: createHighcharts('Highmaps', Highcharts),\n    // Highstock: createHighcharts('Highstock', Highcharts),\n    // HighchartsGantt: createHighcharts('HighchartsGantt', Highcharts),\n  },\n};\n\u003c/script\u003e\n```\n\nTyping:\n\n```ts\ntype ChartName = 'Highcharts' | 'Highstock' | 'Highmaps' | 'HighchartsGantt';\nfunction createHighcharts(name: ChartName, Highcharts: Highcharts): VueComponent | null\n```\n\n### Configuration options and the chart instance\n\n```vue\n\u003ctemplate\u003e\n  \u003cHighcharts ref=\"highchartsRef\" :options=\"chartOptions\" /\u003e\n  \u003cHighstock :options=\"stockOptions\" /\u003e\n  \u003cHighmaps :options=\"mapsOptions\" /\u003e\n  \u003cHighchartsGantt :options=\"ganttOptions\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ref, onMounted } from 'vue';\n\nexport default {\n  setup() {\n    const highchartsRef = ref(null);\n    onMounted(() =\u003e {\n      // access the `chart` instance with template refs\n      const { chart } = highchartsRef.value;\n    });\n    return {\n      highchartsRef,\n      chartOptions: {},\n      stockOptions: {},\n      mapsOptions: {},\n      ganttOptions: {},\n    };\n  },\n};\n\u003c/script\u003e\n```\n\nThe `options` object can be found in [Highcharts API Reference](https://api.highcharts.com/highcharts/).\n\nThe `chart` instance can be accessed with template refs.\n\n## Demo\n\n* [Access `chart` instance via template refs](https://codepen.io/weizhenye/pen/yLeobOP)\n* [Synchronized charts](https://codepen.io/weizhenye/pen/PoZKmjG)\n* [Use Highmaps](https://codepen.io/weizhenye/pen/QWyMxaq)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweizhenye%2Fvue-highcharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweizhenye%2Fvue-highcharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweizhenye%2Fvue-highcharts/lists"}