Minimal Hexagon Chart With JavaScript And Canvas – HexChart

Category: Chart & Graph , Javascript | June 24, 2021
Views Total:396 views
Official Page:Go to website
Last Update:June 24, 2021


Minimal Hexagon Chart With JavaScript And Canvas – HexChart


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,



  • Update hexagon-chart.js

You Might Be Interested In:

Leave a Reply