Interactive SVG Polygon Graph In JavaScript – PolygonChart.js

PolygonChart.js is a JavaScript library to dynamically generate customizable, SVG based polygon graphs from an array of numeric data you provide.

How to use it:

1. Create an element to hold the polygon chart.

<div id="polygon-chart" class="polygon-chart"></div>

2. Load the umd version of the PolygonChart.js library at the end of the document.

<script src="./dist/polygonchart.umd.js"></script>

3. Set the number of sides of the polygon chart.

// Pentagon
let sides = 5;

4. Define the data in a JavaScript array.

const myData = [
      [0.6119768296901937,0.2724477365138749,0.239318715565223,0.8984415079405608,0.6583948674656563],
      [0.0949616836216769,0.3719078227713477,0.34293616595227383,0.460621296000123,0.7063279854775499],
      [0.8504876012507432,0.2653933980482446,0.3178500882778421,0.14247086217571958,0.37765360881841503],
      [0.5424735313476508,0.8882713360214234,0.17852702924856967,0.9788178448900138,0.42509719540882585],
      [0.404222839154583,0.05955589031331465,0.45782102526548796,0.5153100462187783,0.17176626488842728]
]

5. Create a new Polygon Chart instance with several options.

let chart = new window.PolygonChart({
    target: document.getElementById("polygon-chart"),
    data: {
      data: data,
      sides: sides
    }
    levels: {
      count: 10,
      labels: {
        enabled: true,
        position: {
          spline: 1,
          quadrant: 0,
        },
        colors: {
          normal: "#8B27D7",
          onHover: "#A54AE9",
        },
      },
    },
});

6. Render the polygon chart on the page.

chart.init();

7. Possible options to customize the polygon chart.

// radius in px
radius: 0,
// chart data options
data: {
  data: [],
  sides: 0,
  tooltips: {
    roundTo: 0,
    percentage: false,
  },
  colors: {
    normal: {
      polygonStroke: '#1e3d96',
      polygonFill: 'rgba(39, 78, 192,.5)',
      pointStroke: 'transparent',
      pointFill: '#1e3d96',
    },
    onHover: {
      polygonStroke: '#1a3480',
      polygonFill: 'rgba(39, 78, 192,.85)',
      pointStroke: 'transparent',
      pointFill: '#1a3480',
    },
  },
},
// customize the polygon here
polygon: {
  colors: {
    normal: {
      fill: '#fff',
      stroke: '#8c8c8c',
    },
    onHover: {
      splineFill: '#fff',
      splineStroke: '#000',
    },
  },
},
// level options
levels: {
  count: 5,
  labels: {
    enabled: true,
    position: {
      spline: 1,
      quadrant: 0,
    },
    colors: {
      normal: '#8c8c8c',
      onHover: '#000',
    },
  },
},
// requires tippy.js
tippy: {},
// requires anime.js
anime: {
  duration: 10000,
  easing: 'linear',
},
// animation options
animation: {
  autoplay: false
},

Changelog:

v1.0.0 (02/05/2020)

• stable