Minimal Hexagon Chart With JavaScript And Canvas – HexChart

Category: Chart & Graph , Javascript | July 6, 2017
Author: liuxd
Views Total: 536
Official Page: Go to website
Last Update: July 6, 2017
License: MIT

Preview:

Minimal Hexagon Chart With JavaScript And Canvas – HexChart

Description:

HexChart is a very small JavaScript library which 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,