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,
        }
    }
})