Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/apertureless/vue-chartjs

📊 Vue.js wrapper for Chart.js
https://github.com/apertureless/vue-chartjs

chart charting-library chartjs diagram diagrams doughnut pie visualisation vue vue-component vue3 vuejs vuejs2 vuejs3

Last synced: 3 days ago
JSON representation

📊 Vue.js wrapper for Chart.js

Host: GitHub
URL: https://github.com/apertureless/vue-chartjs
Owner: apertureless
License: mit
Created: 2016-06-26T13:25:12.000Z (over 8 years ago)
Default Branch: main
Last Pushed: 2024-04-09T06:51:03.000Z (8 months ago)
Last Synced: 2024-04-14T09:57:35.638Z (8 months ago)
Topics: chart, charting-library, chartjs, diagram, diagrams, doughnut, pie, visualisation, vue, vue-component, vue3, vuejs, vuejs2, vuejs3
Language: TypeScript
Homepage: https://vue-chartjs.org
Size: 11.6 MB
Stars: 5,432
Watchers: 70
Forks: 825
Open Issues: 27
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-vue - vue-chartjs - chartjs?style=social) - vue中的Chartjs的封装 (UI组件)
awesome-github-vue - vue-chartjs - vue中的Chartjs的封装 (UI组件)
awesome-vue - vue-chartjs - vue中的Chartjs的封装 (UI组件)
awesome-github-vue - vue-chartjs - vue中的Chartjs的封装 (UI组件)
awesome - vue-chartjs - vue中的Chartjs的封装 (UI组件)

README

        # vue-chartjs



**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue. You can easily create reuseable chart components.

Supports Chart.js v4.

[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)

[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)

[![Build Status](https://img.shields.io/github/actions/workflow/status/apertureless/vue-chartjs/ci.yml?branch=main)](https://github.com/apertureless/vue-chartjs/actions)

[![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)

[![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs)

[![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby)

[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)

[![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs)

[![Known Vulnerabilities](https://snyk.io/test/github/apertureless/vue-chartjs/badge.svg)](https://snyk.io/test/github/apertureless/vue-chartjs)

[![Donate](https://raw.githubusercontent.com/apertureless/vue-chartjs/main/assets/donate.svg)](https://www.paypal.me/apertureless/50eur)

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)




QuickStart

  •  

Docs

  •  

Stack Overflow






## Quickstart

Install this library with peer dependencies:

```bash

pnpm add vue-chartjs chart.js

# or

yarn add vue-chartjs chart.js

# or

npm i vue-chartjs chart.js

```

Then, import and use individual components:

```vue

  

import {

  Chart as ChartJS,

  Title,

  Tooltip,

  Legend,

  BarElement,

  CategoryScale,

  LinearScale

} from 'chart.js'

import { Bar } from 'vue-chartjs'

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

export default {

  name: 'App',

  components: {

    Bar

  },

  data() {

    return {

      data: {

        labels: ['January', 'February', 'March'],

        datasets: [{ data: [40, 20, 12] }]

      },

      options: {

        responsive: true

      }

    }

  }

}

```



Need an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-vue-chartjs), an open-source API for data apps.




[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-vue-chartjs)

## Docs

- [Reactivity](https://vue-chartjs.org/guide/#updating-charts)

- [Access to Chart instance](https://vue-chartjs.org/guide/#access-to-chart-instance)

- [Accessibility](https://vue-chartjs.org/guide/#accessibility)

- [Migration from v4 to v5](https://vue-chartjs.org/migration-guides/#migration-from-v4-to-v5/)

- [Migration from vue-chart-3](https://vue-chartjs.org/migration-guides/#migration-from-vue-chart-3/)

- [API](https://vue-chartjs.org/api/)

- [Examples](https://vue-chartjs.org/examples/)

## Build Setup

``` bash

# install dependencies

pnpm install

# build for production with minification

pnpm build

# run unit tests

pnpm test:unit

# run all tests

pnpm test

```

## Contributing

1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )

2. Create your feature branch (`git checkout -b my-new-feature`)

3. Commit your changes (`git commit -am 'Add some feature'`)

4. Push to the branch (`git push origin my-new-feature`)

5. Create a new Pull Request

## License

This software is distributed under [MIT license](LICENSE.txt).