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

vue.charts.css

Visualization helps end-users understand data. Vue Charts.css helps frontend developers turn data into beautiful charts and graphs using the powerful Charts.CSS framework.

Install

View Install Guide.

This is still alpha, please do not use in production. Any issues are still however welcome as this is built out. For more information, please read the roadmap.

With Package Managers

Yarn

yarn add vue.charts.css

NPM

npm install vue.charts.css

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>