Skip to content

Instantly share code, notes, and snippets.

@SAW4

SAW4/README.md

Last active August 6, 2017 13:27
Show Gist options
  • Save SAW4/3087a2422beb0c22fcc11e8d3ea28286 to your computer and use it in GitHub Desktop.
Save SAW4/3087a2422beb0c22fcc11e8d3ea28286 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Customize Chart.js Radar Chart

In dataset, you can see:

backgroundColor: "rgba(128,128,128,0.2)",   /** bgcolor inside the grid */
borderColor: "#4099FF",                     /** color of the link */
pointBackgroundColor: "#4099FF",            /** color of circle point */
pointBorderColor: "#fff",                   /** color of circle's border */
pointHoverBackgroundColor: "#4099FF"
pointHoverBorderColor: "#4099FF"

If you want to custom the style of label color, lines of radar:
Set the value in options , and follow this syntax:

'key' : { attribute : 'value'; }

example :

 angleLines:{
    color: '#aaa',
 },
 gridLines:{
   color: '#aaa',
 },					
 pointLabels: {
    fontSize: 14,
    fontColor: '#fff',
 },

In this example, it will represent programming skills level with Chart.js 's Radar Chart with custom style.
You can find out the result here.

Raw
chartjs_example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<style>
div {
height: 512px;
width: 512px;
background-color: #555555;
}
</style>
<title>Chart.js example</title>
</head>
<body>
<div>
<canvas id="skillcanvas"></canvas>
</div>
<script>
var ctx = document.getElementById("skillcanvas");
var data = {
labels: "Linux, Python, HTML, CSS, Javascript, PHP, MySQL, C/C++, Lua".split(","),
datasets: [{
label: "Ability",
backgroundColor: "rgba(128,128,128,0.2)",
borderColor: "#4099FF",
pointBackgroundColor: "#4099FF",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#4099FF",
pointHoverBorderColor: "#4099FF",
data: [6, 5, 5, 5, 4, 3, 3, 5, 3]
}]
};
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: {
scale: {
responsive: true,
ticks: {min: 0, max: 10,display:false},
lineArc: false,
angleLines:{
color: '#aaa',
},
gridLines:{
color: '#aaa',
},
pointLabels: {
fontSize: 14,
fontColor: '#fff',
},
},
legend: {display: false},
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment