Simple charts build with svg without external deps
Lightweight Vue components for drawing pure svg charts without external dependencies.
Live demo can be found on the project page: https://sapk.github.io/vue-svg-charts/
The code of the demo us available here: https://github.com/sapk/vue-svg-charts/blob/master/src/App.vue
yarn
or npm
yarn add vue-svg-charts
OR
npm install vue-svg-charts
vue-svg-charts
import BarGraph from "vue-svg-charts/components/bar";
Vue.use(BarGraph);
With sane defaults in place, basic usage is as simple as passing a points
array of values bar-graph
component.
<template>
<bar-graph :points="points"></bar-graph>
</template>
<script>
export default {
data() {
return {
points: [42, 8, 15, 16, 23, 42, 4, 8, 15]
};
}
};
</script>
<template>
<bar-graph
title="Test Bar Graph"
animDuration="1s"
:showValues="true"
:easeIn="true"
:points="points"
:labels="labels"
:width="1024"
:height="320"
></bar-graph>
</template>
<script>
export default {
data() {
return {
points: [42, 8, 15, 16, 23, 42, 4, 8, 15],
labels: [
"Label 1",
"Label 2",
"Label 3",
"Label 4",
"Label 5",
"Label 6",
"Label 7",
"Label 8",
"Label 9"
]
};
}
};
</script>
width
Number
680
height
Number
320
title
String
points
Array
[]
labels
Array
[]
showValues
Boolean
false
animated
Boolean
true
animDuration
String
1s
Code released under MIT license.