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-chart
Code 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>
[...]
<style>
canvas#tech-radar {
width: 400px;
}
</style>
</head>
<body>
<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"],
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 = {};
const chart = new TechnologyChart(canvas, settings);