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.

Get Started | Learn more | Docs

Dependencies

• Charts.CSS
• Vue 3

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:

"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.

With Package Managers

NPM

npm install vue.charts.css

Yarn

yarn add vue.charts.css

Documentation

Read Guides & Documentation.

<charts-css
    heading="Team's Coffee Count"
    type="bar"
    :labels="['Mon', 'Tue', 'Wed']"
    :datasets="datasets"
/>

<script>
    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],
                    },
                ],
            };
        },
    }
</script>

License

Vue Charts.CSS and Charts.CSS are licensed under the MIT license.

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