technology-chart
v0.0.5
Published
Vanilla library for create technology radar chart using canvas API
Downloads
7
Readme
Technology Chart
An technology radar chart implementation without any dependency inspired in Tought Works radar chart. Built-in with TypeScript. Important: Currently this library is in beta version.
Usage
This library is distributed by NPM (Node package manager). See the steps of installation and usage below.
Install
npm i technology-chartCode implementation
The code implementation is simple and can be resumed in these steps:
- HTML preparation
- Configuration
- Initialization
HTML Preparation
This library is created using Canvas HTML5 API, so you need an canvas element to initialize the chart.
<html>
<head>
[...]
<!-- You can customize the canvas size with CSS -->
<style>
canvas#tech-radar {
width: 400px;
/** By default, the canvas always be a square, using the maximum size [Math.max(width, height)]*/
}
</style>
</head>
<body>
<!-- Add canvas element -->
<canvas id="tech-radar"></canvas>
</body>
</html>Configuration
You should create an configuration object, used by TechnologyChart to create the chart inside canvas. All options provided by configuration object can be found in API Section.
const settings = {
quadrants: ["Lang", "Data", "Frameworks", "Infra"], // Required
rings: ["Adopt", "Trial", "Assess", "Hold"],
data: [
{
quadrant: "Lang",
ring: "Adopt",
value: "TypeScript"
}
]
}Initialization
You prepare de canvas and de configuratio object, now we need pass they with argument of TechnologyChart.
const canvas = document.getElementById("tech-radar");
const settings = {/** The config object of step above */};
const chart = new TechnologyChart(canvas, settings);