// Comment the following line and uncomment the bellow line to use as plugin
Object.keys(HexaChart).forEach(name=>{
Vue.component(name, HexaChart[name])
})
// Uncomment to use as a plugin
// const plugin = {
// install: Vue => {
// Object.keys(HexaChart).forEach(name => {
// Vue.component(name, HexaChart[name])
// })
// }
// }
// Vue.use(plugin)
consthsData=[52.5,26.3,21.2]
consthsColors=['#666666','#999999','#cccccc']
consthsTexts=['Alpha','Beta','Gamma']
constvm=newVue({
data(){
return{
hsData,
hscolors,
hsTexts
}
},
}).$mount('#app')
</script>
</body>
</html>
In a Vue Project
npm i hexachart
...
</template>
<script>
import*asHexaChatfrom'HexaChart'
exportdefault{
name:'Demo',
components:{
HexaChat.HexaStackChart,
...
},
...
Components
HexaStack
Minimal Example
<template>
<div>
<hexa-stack-chart
data="data"
:colors="colors"
:texts="texts"
/>
</div>
</template>
<script>
import{HexaStackChart}from'HexaChart'
exportdefault{
name:'Demo',
components:{
HexaStackChart
},
data(){
return{
data:[52.5,26.3,21.2],
colors:['#666666','#999999','#cccccc'],
texts:['Alpha','Beta','Gamma']
}
}
}
</script>
<style>
/** Fluid & Fixed responsive **/
.hc-hexastack{
width:170px;
height:530px;
}
</style>
Props
prop
type
default
description
data
Array
[]
The main data, array of floats, e.g. [3.5, 4, 16]. The size precede the data sum in priority, that means if size is greater than the data sum, the remaining cells will be filled by offColor, while if it is lesser it will be truncated
colors
Array
['#f67055']
Colors to be used (reserve order with data)
texts
Array
[]
Array of strings that will be used as legend (reserve order with data)
offColor
String
'#757575'
default color for any inactive cell (hexagon)
size
Number
100
The Total number of cells
columns
Number
5
The number of columns
rows
Number
20
The number of rows
horizontal
Boolean
false
Either or not the hexastack is horizontal, default is vertical
animation
Boolean
true
Either or not use animation, if false no animation will play
animationDuration
Number
3000
Animation duration time in milliseconds, do not set to 0, use animation false instead
The main data, One way bound Tree with leafs being on the format {d: 89921 name: 'name to be displayed', id: 1} and parent having an additional children attribute, which is an array of other nodes
colors*
undefined
undefined
not yet implemented
unit
String
''
Unit used in the legend, if left empty it will be ommited
curve*
undefined
undefined
not yet implemented
animation
Boolean
true
Either or not use animation, if false no animation will play
animationDuration
Number
3000
Animation duration time in milliseconds, do not set to 0, use animation false instead