@alexvoedi/hexhex-chart v0.9.2

hexhex-chart

installation

npm install @alexvoedi/hexhex-chart

or

yarn add @alexvoedi/hexhex-chart

usage

import HexChart from '@alexvoedi/hexhex-chart'

const hexchart = new HexChart({
	// div container
	container: document.querySelector('#hexchart'),

	data: [
		{
			x: 0, // >= 0
			y: 0, // >= 0
			color: 'red',
			size: Math.random(), // between 0 and 1
			text: 'Label for hexagon at (0, 0)',
			onClick: () => console.log('click')
		},
		{
			x: 1,
			y: 1,
			color: 'green',
			size: Math.random(),
			text: 'Label for hexagon at (1, 1)',
			onClick: () => console.log('click')
		},
		{
			x: 0,
			y: 2,
			color: 'orange',
			size: Math.random(),
			text: 'Label for hexagon at (0, 2)',
			onClick: () => console.log('click')
		},
		{
			x: 1,
			y: 3,
			color: 'blue',
			size: 1,
			text: 'Label for hexagon at (1, 3)',
			onClick: () => console.log('click')
		},
		{
			x: 0,
			y: 4,
			color: 'black',
			size: Math.random(),
			text: 'Label for hexagon at (0, 4)',
			onClick: () => console.log('click')
		},
		{
			x: 1,
			y: 5,
			color: 'purple',
			size: Math.random(),
			text: 'Label for hexagon at (1, 5)',
			onClick: () => console.log('click')
		},
	],

	style: {
		grid: {
			alwaysSquare: false, // grid always square
			color: '#c4c4c4',
			width: 5,
		},

		label: {
			fontFamily: 'sans-serif',
			fontSize: 36,
		}
	}
})