Vue Wrapper For Charts.CSS Chart Framework

This is a Vue wrapper for the Charts.css framework that helps you generate beautiful charts in Vue applications.

How to use it:

1. Import and register the vue.charts.css.

import Vue from "vue";
import VueChartsCSS from "vue.charts.css";
Vue.use(VueChartsCSS);

2. Add the chart component to the template, determine the chart type and define the chart data as follows:

<charts-css
  heading="Chart Heading"
  type="bar"
  :labels="['Label 1', 'Label 2', 'Label 3']"
  :datasets="datasets"
/>

export default {
  data()
  {
      return {
          datasets: [
              {
                  name: "Data 1",
                  values: [2, 4, 3],
              },
              {
                  name: "Data 2",
                  values: [7, 6, 3, 4],
              },
              {
                  name: "Data 3",
                  values: [12, 278, 0, 0],
              },
          ],
      };
  },
}

3. All default component props.

// 'bar', 'column', 'area', 'line'
type: { type: String, required: true, },
height: { type: [String, Number], },
heading: { type: String, required: true, },
headingSize: { type: String, default: "1rem", },
showHeading: { type: Boolean, default: false, },
labels: { type: Array, required: true, },
showLabels: { type: Boolean, default: false, },
dataSpacing: { type: Number, default: 0, },
hideData: { type: Boolean, default: false, },
showDataAxis: { type: Boolean, default: false, },
showDataOnHover: { type: Boolean, default: false, },
datasets: { type: Array, required: true, },
showLegend: { type: Boolean, default: false, },
legendInline: { type: Boolean, default: true, },
legendType: { type: String, default: "square", },
showTooltips: { type: Boolean, default: false, },
resolveDataTooltip: {
  type: Function,
  default: (value, label, datasetName, rowIndex, colIndex, hasMultipleDatasets = false) => {
      return ( datasetName && hasMultipleDatasets ? datasetName : label ) + ": " + value;
  },
},
reverse: { type: Boolean, default: false, },
stacked: { type: Boolean, default: false, },
classes: { type: String, },
color: { type: String, default: null, },
formatDataValue: { type: Function, default: (value) => value },
resolveDataColor: {
  type: Function,
  default: (value, label, datasetName, rowIndex, colIndex, hasMultipleDatasets = false) => null,
},

Preview:

Changelog:

v2.0.1 (05/01/2022)

• Dependency updates

v2.0.0 (01/30/2022)

• Upgraded to Vue 3

v1.0.1 (08/22/2021)

• Update package

03/27/2021

• Update package

03/26/2021

• feat: automatic installation if Vue is in global scope

Download Details:

Author: Vue-Charts-CSS

Live Demo: https://www.cssscript.com/demo/css-chart-graph-framework

Download Link: https://github.com/Vue-Charts-CSS/vue.charts.css/archive/refs/heads/main.zip

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

Install & Download:

# Yarn
$ yarn add vue.charts.css

# NPM
$ npm i vue.charts.css