JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/guilespi/coxcomb-chart/master/src/coxcomb.js"></script>
JavaScript
var el = document.createElement("div");
var paper = Raphael(el, 600,600);
var properties = {
categorySize : 0.20, // percentage of radius used for categories
categoryFontSize : 10,
seriesFontSize : 10,
stroke : "#fff"
};
var skills = {
data : {
Languages : {
"c++" : 8,
"lua" : 8,
"javascript" : 8,
"python" : 5,
"clojure" : 4,
"c" : 9,
},
"DB/Search" : {
"SQL Server" : 8,
"MySql" : 6,
"Cassandra" : 7,
"Redis" : 8,
"Solr" : 6
},
Tools : {
"WinDbg" : 9,
"gdb" : 8,
"IDA Pro" : 6,
"valgrind" : 7,
"git" : 7,
"jenkins" : 8,
"selenium" : 7,
},
},
colors : {
category : "#2B2B2B",
opacity : 0.8,
fontColor : "#fff",
byCategory : {
Tools : {
color : "#E9E581",
opacity : 0.8,
fontColor : "#000000"
},
Languages : {
color : "#DE1B1B",
opacity : 0.7,
fontColor : "#fff"
},
"DB/Search" : {
color : "#2B2B2B",
opacity : 0.1,
fontColor : "#000000"
}
},
}
};
paper.coxCombChart(200,200,200, skills, properties);
document.body.appendChild(el);