Minimal Hexagon Chart With JavaScript And Canvas – HexChart

Preview:

Description:

HexChart is a very small JavaScript library that helps you draw a hexagon chart on an HTML5 canvas element.

How to use it:

Just download and include the HexChart.js on the html page.

<script src="hexagon-chart.js"></script>

Create an empty HTML5 canvas element for the hexagon chart.

<canvas id="demo"></canvas>

Initialize the hexagon chart:

// hexagon.init(id, side_length, names, color)
hexagon.init('demo', 180, ['Name 1', 'Name 2', 'Name 3', 'Name 4', 'Name 5', 'Name 6']);

Draw the hexagon chart on the canvas element.

hexagon.draw(values, color);

Override the default values in the JavaScript.

bg_default_color: '#99ccff',
value_default_color: '#ffff99',
x_offset: 30,

Changelog:

06/24/2021

• Update hexagon-chart.js