This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

vue-slim-stackedbar

A Simple horizontal stacked bar chart Component for Vue.

Browser Support

Chrome	Firefox	Safari	Edge	IE
35+	31+	6+	Legacy+	NOT TESTED
--	--	--	--	--

Installing

Installing via npm

$ npm install vue-slim-stackedbar

Usage

import StackedBar from 'vue-slim-stackedbar'

• To create a stacked bar chart with minimal configuration, write as follows:

<template>
  <StackedBar :data="data" />
</template>

export default {
  components: {
    StackedBar,
  },
  data() {
    return {
      data: [
        {
          title: 'First',
          value: 19,
          percent: 19,
          color: '#007bff'
        },
        {
          title: 'Second',
          value: 36,
          percent: 36,
          color: '#20c997'
        },
        {
          title: 'Third',
          value: 45,
          percent: 45,
          color: '#f28b8c'
        }
      ]
    };
  },
};

• This will render the following chart:

Props

Name	Type	Default	Example	Description
title	String	X	'String Sample'	Title of Data Stack. Only String can be used.
value	Number	X	15	Value of data. Only Number can be used.
percent	Number	X	27	Value of percent. Only Number can be used. The sum of the data must not exceed 100.
color	String	X	'#f28b8c'	Title of Data Stack. Only use a color hash code with #.

Contact

License

vue-slim-stackedbar is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.