polygonchart.js
Advanced tools
🔺 A library to graph numerical data using simple polygon visualizations.
PolygonChart.js is a library to graph numerical data using simple polygon SVG visualizations.
Getting started | Documentation | Demos and examples | Browser support
Latest version: 1.0.0
npm install polygonchart.js
Install peer dependencies anime.js (animations) and tippjs.js (tooltips).
Below you will find all of the information needed to configure a polygon chart. Included is a detailed analysis of each value, its defaults and some informational examples. You will also find function calls, their parameters and descriptions too.
The value you pass through on instantiation. Below you will find all of the values and defaults for this object.
Type: Object
Example usage:
let options = {};
let chart = new PolygonChart(options);
chart.init();
This is the element that you pass through as the parent of the svg chart.
Type: Node
Default: null
Example usage:
<html>
<main>
<div id='chart-container'></div>
</main>
<style>
#chart-container {
display: block;
width: 400px;
height: 400px;
}
</style>
<script>
let element = document.getElementById('chart-container');
let chart = new PolygonChart({
target: element,
});
chart.init();
</script>
</html>
The radius of your chart.
Type: Number
Default:
radius: 200
Values:
data: {
data: Array,
sides: Number,
tooltips: {
roundTo: Number,
percentage: Boolean,
},
colors: {
normal: {
polygonStroke: String,
polygonFill: String,
pointStroke: String,
pointFill: String,
},
onHover: {
polygonStroke: String,
polygonFill: String,
pointStroke: String,
pointFill: String,
},
},
}
This is the data that you pass through for the polygon. It is an array of arrays.
Type: Array(Array())
Default:
data: []
Example (For a 5 sided polygon):
{
data: [
[
0.310984,
0.590125,
0.203583,
0.420541,
0.159303,
],
],
}
The number of sides the polygon has. This overrides any number of data points in the options.data.data value.
Type: Number
Default:
sides: 0
Example (For a 5 sided polygon):
{
sides: 5
}
The data tooltips for each point. Contains flags for manipulating the tooltip values.
Type: Object
Default:
{
roundTo: 0,
percentage: false,
}
options.data.tooltips.roundTo: Number - The number value to round to for the tooltip.options.data.tooltips.percentage: Boolean - Whether or not to include "%" at the end of the tooltip value.The colors for the polygon data. You can set the normal and onHover colors.
Type: Object
Default:
{
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',
},
}
polygonStroke: String - The stroke color of the data polygonpolygonFill: String - The fill color of the data polygonpointStroke: String - The stroke color of the data pointpointFill: String - The fill color of the data pointValues:
polygon: {
colors: {
normal: {
fill: String,
stroke: String,
},
onHover: {
fill: String,
stroke: String,
}
}
}
The colors for the polygon data. You can set the normal and onHover colors.
Type: Object
Default:
{
normal: {
fill: '#fff',
stroke: '#8c8c8c',
},
onHover: {
splineFill: '#fff',
splineStroke: '#000',
},
}
fill: String - The fill color of the polygon graphstroke: String - The stroke color of the polygon graphValues:
levels: {
count: Number,
labels: {
enabled: Boolean,
position: {
spline: Number,
quadrant: Number,
},
colors: {
normal: String,
onHover: String,
},
},
},
The number of levels the polygon graph has. This is the number of inner polygons. Think of these as percentages in the graph. For example, with count of 5, there will be 5 inner polygons (The labels would be then: [10%, 20%, 30%, 40%, 50%]).
Type: Number
Default:
count: 5
The labels block contains flags for manipulating the level's labels.
Type: Object
Whether or not to display the labels of the percentages for each level. From the above options.levels.count, with a count of 5, there will be 5 inner polygons (The labels would be then: [10%, 20%, 30%, 40%, 50%]).
Type: Boolean
Default:
enabled: true
Configure where to position the labels for each level. The quadrant value overrides the spline value.
Type: Object
Default:
{
spline: 1,
quadrant: 0,
}
spline: Number - The spline to position the labels on. Min: 0. Max: options.data.sidesquadrant: Number - The quadrant to position the labels in. Min: 0. Max: options.data.sidesThe colors for the level labels. You can set the normal and onHover colors.
Type: Object
Default:
{
normal: '#8c8c8c',
onHover: '#000',
}
normal: String - The text coloronHover: String - The text color on hover of a inner polygonOptions to pass through for tippy.js instantiation. For more information, please refer to tippy.js documentation:
Type: Object
Default:
tippy: {}
Options to pass through for anime.js instantiation. For more information, please refer to anime.js documentation:
Type: Object
Default:
anime: {
duration: 10000,
easing: 'linear',
}
Options to pass through for animation of the data polygon.
Values:
animation: {
autoplay: Boolean,
}
Whether or not to automatically play the animation after the graph's instantiation.
Type: Boolean
Default:
autoplay: false
After instantiation, your PolygonChart instance will expose the following functions for you to use. Each of the functions return self which allows you to chain functions if you wish.
Example usage:
let chart = new PolygonChart();
chart.init();
This is the instantiation function that must be called after you create a new PolygonChart instance.
Example usage:
let chart = new PolygonChart();
chart.init();
This function only works if you have included anime.js. It uses anime.js play() function to play the data animation. For more information, please refer to the documentation here:
Example usage:
let chart = new PolygonChart();
chart.startAnimation();
This function only works if you have included anime.js. It uses anime.js restart() and pause() functions to restart the data animation. For more information, please refer to the documentation here for restart(): and pause():
Example usage:
let chart = new PolygonChart();
chart.resetAnimation();
This function only works if you have included anime.js. It uses anime.js pause() function to stop the data animation. For more information, please refer to the documentation here:
Example usage:
let chart = new PolygonChart();
chart.stopAnimation();
This function only works if you have included anime.js. It uses anime.js seek() function to jump to a specific point in time in the data animation. For more information, please refer to the documentation here:
Example usage:
let chart = new PolygonChart();
chart.seekAnimation(4000);
This function reloads your PolygonChart instance. For example, if you edit any of the options values, you can call reload() to make sure the changes take effect.
Example usage:
let chart = new PolygonChart();
chart.reload();
| Chrome | Safari | IE / Edge | Firefox | Opera |
|---|---|---|---|---|
| 24+ | 8+ | 11+ | 32+ | 15+ |
Find me on Gab: @markmiscavage.
Tweet at me: @markmiscavage.
MIT License
Copyright (c) 2020 Mark Miscavage
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
FAQs
🔺 A library to graph numerical data using simple polygon visualizations.
We found that polygonchart.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.