# hexachart > Hexagon based data-viz ## Quick Run ```html Latest version **0.9.0** (published 2019-01-07) · 0 weekly downloads ## Install ```sh npm install hexachart pnpm add hexachart yarn add hexachart bun add hexachart ``` ## Health **Score 10/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; low quality score; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.9.0 | | Published | 2019-01-07 | | First published | 2018-11-11 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 8 | | Unpacked size | 3.6 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Maintainers | bashz | ## Links - npm: https://www.npmjs.com/package/hexachart - npm.io page: https://npm.io/package/hexachart ## Dependencies (8) - [vue](https://npm.io/package/vue.md) ^2.5.17 - [d3-array](https://npm.io/package/d3-array.md) ^2.0.2 - [d3-force](https://npm.io/package/d3-force.md) ^1.1.2 - [d3-scale](https://npm.io/package/d3-scale.md) ^2.1.2 - [d3-shape](https://npm.io/package/d3-shape.md) ^1.2.2 - [d3-axis-norender](https://npm.io/package/d3-axis-norender.md) ^1.0.8-r4 - [@tweenjs/tween.js](https://npm.io/package/@tweenjs/tween.js.md) ^17.2.0 - [d3-scale-chromatic](https://npm.io/package/d3-scale-chromatic.md) ^1.3.3 ## Recent versions - 0.9.0 (latest) — 2019-01-07 - 0.8.0 — 2019-01-04 - 0.7.0-r1 — 2019-01-02 - 0.7.0 — 2019-01-02 - 0.6.0 — 2018-12-28 - 0.5.2-r3 — 2018-12-25 - 0.5.2-r1 — 2018-12-25 - 0.5.2 — 2018-12-24 - 0.5.1 — 2018-12-20 - 0.5.0 — 2018-12-19 - 0.4.9 — 2018-12-07 - 0.4.8-r6 — 2018-12-05 - 0.4.8-r5 — 2018-12-05 - 0.4.8-r4 — 2018-12-03 - 0.4.8-r3 — 2018-12-03 - … 10 more at https://npm.io/package/hexachart/versions ## README # hexachart Hexagon based data-viz ## Quick Run ```html

``` In a Vue Project ``` npm i hexachart ``` ```html ... ``` ### 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](https://github.com/tweenjs/tween.js/) | | gradientSpread | Number | .5 | How much the gradient will spread, 0 for sharp separation| ## HexaPie ### Minimal Example ```html ``` ### 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](https://github.com/tweenjs/tween.js/) | ## HexaInception ### Minimal Example ```html ``` ### 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](https://github.com/tweenjs/tween.js/) | ## HexaBubule ### Minimal Example ```html ``` ### 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](https://github.com/tweenjs/tween.js/) | --- _Source: https://npm.io/package/hexachart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._