vue-radial-bargraph v0.3.0
vue-radial-bargraph
VueJS component for a simple radial bar graph made using d3
How to Use
- Install package
npm i vue-radial-bargraph
- Import component
import RadialBarGraph from "vue-radial-bargraph"
- Add to components
components:{
RadialBarGraph
}
- Add element
<radial-bar-graph title="Asset Allocation" :width="400" :labels="['Bonds','Equity','Mutual Funds','GSEC','Real Estate']" :values="[100,200,400,50,600]" labelText="label: value" hoverText="label (percent of total)"/>
Props
width
:Number
- width of the graph in pixels(height will also be set to the same value). eg.300
values
:Array
- Number Array containing values of the graph. Eg[100,200,300]
labels
:Array
- String Array containing labels of graph. Eg['Mango','Apple','Banana']
colorScale
:Array
- String Array containing the color scale. Graph entries will have colours scaled by this scale. Eg.["#4FC3F7","#0277BD"]
title
:String
- Graph titlelabelText
:String
- the format in which the label will be displayed. You can uselabel
,value
andpercent
variables as templates, the respective labels, values and percentages will be substituted in place. Eg if set aslabel: value (percent of total)
, labels will be in this formatted asMango: 100 (16.66% of total)
hoverText
:String
- the format in which the tooltip text will be displayed. You can uselabel
,value
andpercent
variables as templates, the respective labels, values and percentages will be substituted in place. Eg if set aslabel: value (percent of total)
, tooltips will be in this formatted asMango: 100 (16.66% of total)