0.1.9 • Published 3 years ago
vue-slim-stackedbar v0.1.9
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-stackedbarUsage
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.