{"id":18307920,"url":"https://github.com/froala/vue-froalacharts","last_synced_at":"2025-04-05T17:32:04.693Z","repository":{"id":56432515,"uuid":"290978028","full_name":"froala/vue-froalacharts","owner":"froala","description":"Simple and lightweight official Vue component for FroalaCharts.","archived":false,"fork":false,"pushed_at":"2020-12-17T11:00:13.000Z","size":276,"stargazers_count":5,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-21T08:11:13.223Z","etag":null,"topics":["charts","froalacharts","javascript-charts","vue-charts","vue-froalacharts"],"latest_commit_sha":null,"homepage":"https://froala.com/","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/froala.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":"2020-08-28T07:16:25.000Z","updated_at":"2023-04-28T06:51:00.000Z","dependencies_parsed_at":"2022-08-15T18:40:15.927Z","dependency_job_id":null,"html_url":"https://github.com/froala/vue-froalacharts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fvue-froalacharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fvue-froalacharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fvue-froalacharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fvue-froalacharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/froala","download_url":"https://codeload.github.com/froala/vue-froalacharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247374923,"owners_count":20928911,"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":["charts","froalacharts","javascript-charts","vue-charts","vue-froalacharts"],"created_at":"2024-11-05T16:05:53.607Z","updated_at":"2025-04-05T17:32:03.789Z","avatar_url":"https://github.com/froala.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-froalacharts\n\nSimple and lightweight Vue component for FroalaCharts. `vue-froalacharts` enables you to add JavaScript charts in your Vue application or project without any hassle.\n\n- Github Repo: [https://github.com/froala/vue-froalacharts](https://github.com/froala/vue-froalacharts)\n- Documentation: [https://froala.com/charts/docs/frameworks/vue/](https://froala.com/charts/docs/frameworks/vue/)\n- Support: [support@froala.com](support@froala.com)\n- FroalaCharts\n  - Official Website: [https://froala.com/](https://froala.com/)\n  - Official NPM Package: [https://www.npmjs.com/package/froalacharts](https://www.npmjs.com/package/froalacharts)\n- Issues: [https://github.com/froala/vue-froalacharts/issues](https://github.com/froala/vue-froalacharts/issues)\n\n---\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n  - [Requirements](#requirements)\n  - [Installation](#installation)\n  - [Usage](#usage)\n- [Quick Start](#quick-start)\n- [For Contributors](#for-contributors)\n- [Licensing](#licensing)\n\n## Getting Started\n\n### Requirements\n\n- **Node.js**, **NPM/Yarn** installed globally in your OS.\n- **FroalaCharts** and **Vue** installed in your project, as detailed below:\n\n## Installation\n\n**Direct Download**\nAll binaries are located on our [github repository](https://github.com/froala/vue-froalacharts).\n\n**Install from NPM**\n\n```bash\nnpm install vue-froalacharts --save\n```\n\n**Install from Yarn**\n\n```bash\nyarn add vue-froalacharts\n```\n\n**Include in your script**\n\nDownload `vue-froalacharts.js` and include it in the HTML `\u003cscript\u003e` tag.\n\n```html\n\u003cscript src=\"vue-froalacharts.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n\n### Usage\n\nThere are two ways of adding `vue-froalacharts` component in your project\n\n**Registering globally as a plugin**\nImport `vue`, `vue-froalacharts` and FroalaCharts in main app file.\n\n```js\nimport Vue from `vue`;\nimport VueFroalaCharts from 'vue-froalacharts';\n\n// import FroalaCharts modules and resolve dependency\nimport FroalaCharts from 'froalacharts';\n```\n\nNow, register it as plugin in Vue object\n\n```js\nVue.use(VueFroalaCharts, FroalaCharts);\n```\n\nThis way is recommended when you want component (`vue-froalacharts` ) available from everywhere in your app.\n\n**Registering locally in your component**\nImport the chart component from `vue-froalacharts/component` package in your component file and use `Vue.component` to register it locally.\n\n```js\nimport Vue from `vue`;\nimport VueFroalaChartsComponent from 'vue-froalacharts/component';\n\n// import FroalaCharts modules and resolve dependency\nimport FroalaCharts from 'froalacharts';\n\nconst vueFroalaCharts = VueFroalaChartsComponent(FroalaCharts);\n\nVue.component('froalacharts', vueFroalaCharts);\n```\n\nThis way is recommended when you want component (`vue-froalacharts` ) only in specific components of your app.\n\nWhere `eventName` can be any FroalaCharts event. You can find the list of events at [froalacharts docs](https://froala.com/charts/docs/api/events/)\n\n## Quick Start\n\nHere is a basic sample that shows how to create a chart using `vue-froalacharts`:\n\n```js\nimport Vue from 'vue';\nimport VueFroalaCharts from 'vue-froalacharts';\nimport FroalaCharts from 'froalacharts';\n\n// register VueFroalaCharts component\nVue.use(VueFroalaCharts, FroalaCharts);\n\nconst myDataSource = {\n  chart: {\n    caption: 'Recommended Portfolio Split',\n    subCaption: 'For a net-worth of $1M',\n    showValues: '1',\n    showPercentInTooltip: '0',\n    numberPrefix: '$',\n    enableMultiSlicing: '1',\n    theme: 'froala'\n  },\n  data: [\n    {\n      label: 'Equity',\n      value: '300000'\n    },\n    {\n      label: 'Debt',\n      value: '230000'\n    },\n    {\n      label: 'Bullion',\n      value: '180000'\n    },\n    {\n      label: 'Real-estate',\n      value: '270000'\n    },\n    {\n      label: 'Insurance',\n      value: '20000'\n    }\n  ]\n};\n\nconst chart = new Vue({\n  el: '#app',\n  data: {\n    type: 'pie',\n    width: '500',\n    height: '300',\n    dataFormat: 'json',\n    dataSource: myDataSource\n  }\n});\n```\n\nHere's HTML template for the above example:\n\n```html\n\u003cdiv id=\"app\"\u003e\n  \u003cfroalacharts\n    :type=\"type\"\n    :width=\"width\"\n    :height=\"height\"\n    :dataFormat=\"dataFormat\"\n    :dataSource=\"dataSource\"\n  \u003e\n  \u003c/froalacharts\u003e\n\u003c/div\u003e\n```\n\nlinks to help you get started:\n\n- [Documentation](https://froala.com/charts/docs/frameworks/vue/)\n- [FroalaCharts API](https://froala.com/charts/docs/api/options/)\n- [Chart gallery](https://froala.com/charts/tour/)\n\n## For Contributors\n\n- Clone the repository and install dependencies\n\n```\n$ git clone https://github.com/froala/vue-froalacharts.git\n$ cd vue-froalacharts\n$ npm install\n```\n\n- Run `npm start` to start the dev server and point your browser at [http://localhost:8080/](http://localhost:8080/).\n\n## Licensing\n\nThe FroalaCharts Vue component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FroalaCharts library in your page separately, which has a [separate license](https://www.ideracorp.com/Legal/Froala/FroalaChartsLicenseAgreement).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Fvue-froalacharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffroala%2Fvue-froalacharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Fvue-froalacharts/lists"}