Hexachart NPM | npm.io

hexachart

Hexagon based data-viz

Quick Run

<html>
</head>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/hexachart/dist/HexaChart.umd.min.js"></script>
</head>
<body>
<div id="app" class="container">
  <hexa-stack-chart :data="hsData" :texts="hsTexts" :colors="hsColors"/>
</div>
<script>
  // 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)
  const hsData = [52.5, 26.3, 21.2]
  const hsColors = ['#666666', '#999999', '#cccccc']
  const hsTexts = ['Alpha', 'Beta', 'Gamma']
  const vm = new Vue({
    data() {
      return {
        hsData,
        hscolors,
        hsTexts
      }
    },
  }).$mount('#app')
</script>
</body>
</html>

In a Vue Project

npm i hexachart

...
</template>
<script>
import * as HexaChat from 'HexaChart'
export default {
  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'
export default {
  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
animationOptions	Object	{delay: 0, easing: 'Bounce', easingEdge: 'Out'}	Object of tweenjs like animation
gradientSpread	Number	.5	How much the gradient will spread, 0 for sharp separation

HexaPie

Minimal Example

<template>
<div>
  <hexa-pie-chart
    :data="data"
    :texts="texts"
  />
</div>
</template>

<script>
import HexaPieChart from 'HexaChart'
export default {
  name: 'Demo',
  components: {
    HexaPieChart
  },
  data () {
    return {
      data: [32, 18],
      texts: ['Alpha', 'Beta']
    }
  }
}
</script>

<style>
.hc-hexapie {
  width: 316px;
  height: 234px;
}
.hc-hexapie-text {
  fill: #ffffff;
  font-size: 20px;
}
.hc-hexapie-legend {
  font-size: 20px;
  fill: #999999;
}
</style>

Props

prop	type	default	description
data	Array	[]	The main data, array of floats, e.g. 3.5, 4, 16. This data are represented as percentage on the pie chart
colors	Array	'#666666', '#f56042'	Colors to be used (reserve order with data)
texts	Array	Array of strings that will be used as legend (reserve order with data)
radius	Number	116	Radius of the pie
curve	Number	0.8	A float between 0..1 that indicate how rounded are the hexagon conrners, 0 would make it a circle and 1 a hexagon
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
animationOptions	Object	{delay: 0, easing: 'Bounce', easingEdge: 'Out'}	Object of tweenjs like animation

HexaInception

Minimal Example

<template>
<div>
  <hexa-inception-chart
    :data="data"
    :texts="texts"
    :unit="unit"
  />
</div>
</template>

<script>
import HexaInceptionChart from 'HexaStack'
export default {
  name: 'Demo',
  components: {
    HexaInceptionChart
  },
  data () {
    return {
      data: [107228, 76561],
      texts: ['Alpha', 'Beta'],
      unit: 'M'
    }
  }
}
</script>

<style>
.hc-hexainception {
  width: 500px;
  height: 500px;
}
</style>

Props

prop	type	default	description
data	Array	[]	The main data, Ordered array of floats, e.g. 16, 5, 2
colors	Array	'#666666', '#f56042'	Colors to be used (reserve order with data)
texts	Array	Array of strings that will be used as legend (reserve order with data)
unit	String	''	Unit used in the legend, if left empty it will be ommited
curve	Number	0.8	A float between 0..1 that indicate how rounded are the hexagon conrners, 0 would make it a circle and 1 a hexagon
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
animationOptions	Object	{delay: 0, easing: 'Bounce', easingEdge: 'Out'}	Object of tweenjs like animation

HexaBubule

Minimal Example

<template>
<div>
  <hexa-buble-chart
    :data="data"
  />
</div>
</template>

<script>
import HexaBubleChart from 'HexaStack'
export default {
  name: 'Demo',
  components: {
    HexaBubleChart
  },
  data () {
    return {
      data: [
        {d: 30222 name: 'GrandPa1', id: 1, children: [
          {d: 5600, name: 'Pa1_1', id: 11, children: [
            {d: 130932 name: 'Kid1_1_1', id: 111},
            {d: 89921 name: 'Kid1_1_2', id: 112},
            ...
          ]},
          {d: 66554, name: 'Pa1_2', id: 12, children: [
            ...
          ]},
          ...
        ]},
        ...
      ]
    }
  }
}
</script>

<style>
.hc-hexabuble {
  width: 100%;
  height: 500px;
}
.hc-hexabuble-chart {
  border: #000 solid 1px;
}
.hc-hexabuble-legend {
  font-size: 16px;
  fill: #999999;
}
</style>

Props

prop	type	default	description
data	Array	[]	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
animationOptions	Object	{delay: 0, easing: 'Bounce', easingEdge: 'Out'}	Object of tweenjs like animation