{"id":19990280,"url":"https://github.com/Yopadd/vue-chartist","last_synced_at":"2025-05-04T09:34:57.158Z","repository":{"id":42223402,"uuid":"47747670","full_name":"Yopadd/vue-chartist","owner":"Yopadd","description":"Pluging chartist for vuejs","archived":false,"fork":false,"pushed_at":"2023-03-04T03:00:26.000Z","size":1084,"stargazers_count":172,"open_issues_count":14,"forks_count":20,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-22T12:07:43.317Z","etag":null,"topics":["chartist","vue-chartist","vuejs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yopadd.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-12-10T08:17:33.000Z","updated_at":"2023-07-25T21:14:00.000Z","dependencies_parsed_at":"2024-06-18T13:49:03.824Z","dependency_job_id":"b870e90a-7f9c-4666-baa8-19d5837d69df","html_url":"https://github.com/Yopadd/vue-chartist","commit_stats":{"total_commits":91,"total_committers":15,"mean_commits":6.066666666666666,"dds":0.3076923076923077,"last_synced_commit":"72b85cb63ef3652c13c9b0659f5ec033431622d1"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yopadd%2Fvue-chartist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yopadd%2Fvue-chartist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yopadd%2Fvue-chartist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yopadd%2Fvue-chartist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yopadd","download_url":"https://codeload.github.com/Yopadd/vue-chartist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252316856,"owners_count":21728521,"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":["chartist","vue-chartist","vuejs"],"created_at":"2024-11-13T04:51:06.865Z","updated_at":"2025-05-04T09:34:56.842Z","avatar_url":"https://github.com/Yopadd.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-chartist\n\nPlugin [Vuejs](http://vuejs.org/) for [Chartist.js](https://gionkunz.github.io/chartist-js)\n\n## Install\n\n```\nnpm install vue-chartist\n```\n\n## Setup\n\n**This package include Chartist's javascript but not the stylesheet**\n\n```javascript\nconst Vue = require(\"vue\")\nconst vueChartist = require(\"../../index.js\")\nVue.createApp({}).use(vueChartist)\n```\n\n## Usage\n\nIn your HTML, add `\u003cchartist\u003e` tag. This tag take the following attributes :\n\n- **ratio** - `String`\n  class ratio of Chartist, see values on [Chartist web site](https://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get)\n\n- **type** - `String` (required)\n  chart type, possible values : - `Line` - `Bar` - `Pie`\n\n- **data** - `Object`\n  data object like this\n\n```javascript\nconst data = {\n  labels: [\"A\", \"B\", \"C\"],\n  series: [\n    [1, 3, 2],\n    [4, 6, 5],\n  ],\n}\n```\n\n- **options** - `Object`\n  options object, see defaultOptions on [API Documentation](https://gionkunz.github.io/chartist-js/api-documentation.html)\n\n- **event-handlers** - `Array`\n  a special array to use `chart.on(event, function)`\n\n```javascript\nconst eventHandlers = [\n  {\n    event: \"draw\",\n    fn() {\n      //animation\n    },\n  },\n  {\n    //an other event hander\n  },\n]\n```\n\n- **responsive-options** - `Array`\n  object for responsive options\n\n## Example\n\n```html\n\u003cchartist\n  ratio=\"ct-major-second\"\n  type=\"Line\"\n  :data=\"chartData\"\n  :options=\"chartOptions\"\n\u003e\n\u003c/chartist\u003e\n```\n\n\u003e _Note: think about using the [dynamic props](http://vuejs.org/guide/components.html#Dynamic_Props) of Vuejs to bind easliy your data or other._\n\n```javascript\nVue.createApp({\n  data: {\n    chartData: {\n      labels: [\"A\", \"B\", \"C\"],\n      series: [\n        [1, 3, 2],\n        [4, 6, 5],\n      ],\n    },\n    chartOptions: {\n      lineSmooth: false,\n    },\n  },\n})\n  .use(vueChartist)\n  .mount(\"#app\")\n```\n\n## Customize chart with no data\n\nIf chart data are empty or not definied the plugin add `ct-nodata` (or a custom class, see options plugin) class and write a message on the element.\nThat way, you can customize your element with CSS when you have no data to display. To choose your message use the options plugin.\n\n## Options Plugin\n\n```javascript\napp.use(require(\"vue-chartist\"), {\n  messageNoData: \"You have not enough data\",\n  classNoData: \"empty\",\n})\n```\n\n## Chartist instance\n\nThere is two way to access this Chartist's instance :\nBy `Vue` instance\n\n```javascript\nVue.chartist\n```\n\nor in component\n\n```javascript\nthis.$chartist\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYopadd%2Fvue-chartist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FYopadd%2Fvue-chartist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYopadd%2Fvue-chartist/lists"}