https://github.com/Vue-Charts-CSS/vue.charts.css

Generate beautiful charts with CSS and Vue: full accessibility and no hassle.
https://github.com/Vue-Charts-CSS/vue.charts.css

css js vue vue2 vue3

Last synced: 17 days ago
JSON representation

Generate beautiful charts with CSS and Vue: full accessibility and no hassle.

• Host: GitHub
• URL: https://github.com/Vue-Charts-CSS/vue.charts.css
• Owner: Vue-Charts-CSS
• License: mit
• Created: 2021-03-20T20:11:12.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-05-13T13:36:32.000Z (over 2 years ago)
• Last Synced: 2024-10-23T07:37:32.179Z (19 days ago)
• Topics: css, js, vue, vue2, vue3
• Language: Vue
• Homepage: https://vue-charts-css.github.io/docs/
• Size: 501 KB
• Stars: 15
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Charts.CSS



Visualization helps end-users understand data. **Vue Charts.CSS** helps frontend developers turn data into beautiful *interactive* charts and graphs using the powerful [Charts.CSS framework](https://chartscss.org).

![Version](https://badgen.net/npm/v/vue.charts.css) ![Size](https://badgen.net/badgesize/normal/Vue-Charts-CSS/vue.charts.css/main/dist/vue-charts-css.min.js) ![Size GZIP](https://badgen.net/badgesize/gzip/Vue-Charts-CSS/vue.charts.css/main/dist/vue-charts-css.min.js) ![Size Brotli](https://badgen.net/badgesize/brotli/Vue-Charts-CSS/vue.charts.css/main/dist/vue-charts-css.min.js)

[Get Started | Learn more | Docs](https://vue-charts-css.github.io/docs/get-started/)

## Dependencies

+ [Charts.CSS](https://github.com/ChartsCSS/charts.css)

+ Vue 3

Need Vue 2 support?

Vue Charts CSS is built for Vue 3, however you can still use the Vue 2 supported version of Vue Charts CSS by locking to the `1.x.x` versions of the package.

Make sure your `package.json` file has the following:

```json

"dependencies": {

  "vue.charts.css": "^1.0.1"

}

```

Vue 2 is supported under the `vue2` branch and `1.x.x` versions of the package. However, it is highly recommended upgrading to Vue 3 for long-term support.

## Install

[View Install Guide](https://vue-charts-css.github.io/docs/get-started/installation).

### With Package Managers

NPM

```

npm install vue.charts.css

```

Yarn

```

yarn add vue.charts.css

```

## Documentation

[Read Guides & Documentation](https://vue-charts-css.github.io/docs/).

```vue

```

```vue

    export default {

        data()

        {

            return {

                datasets: [

                    {

                        name: "Ben",

                        values: [2, 4, 3],

                    },

                    {

                        name: "Josie",

                        values: [7, 6, 3, 4],

                    },

                    {

                        name: "Tim",

                        values: [12, 278, 0, 0],

                    },

                ],

            };

        },

    }

```

## License

**Vue Charts.CSS** and **Charts.CSS** are licensed under the [MIT license](https://opensource.org/licenses/MIT).

**Vue Charts.CSS** is not affiliated with the creators of **Charts.CSS**.