line chart with ChartJS
HTML
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<canvas id="chart" width="600" height="600"></canvas>
JavaScript
var data = [
{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red and some long text"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green and some long text"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow and some long text"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey and some long text"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey and some long text"
}
];
var ctx = document.getElementById("chart").getContext("2d");
var polarChart = new Chart(ctx).PolarArea(data, {
scaleOverride: true,
scaleStartValue: 0,
scaleStepWidth: 40,
scaleSteps: 10,
onAnimationComplete: function () {
this.segments.forEach(function (segment) {
var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({
x: this.chart.width / 2,
y: this.chart.height / 2,
startAngle: segment.startAngle,
endAngle: segment.endAngle,
outerRadius: segment.outerRadius * 2 + 10,
innerRadius: 0
})
var normalizedAngle = (segment.startAngle + segment.endAngle) / 2;
while (normalizedAngle > 2 * Math.PI) {
normalizedAngle -= (2 * Math.PI)
}
if (normalizedAngle < (Math.PI * 0.4) || (normalizedAngle > Math.PI * 1.5))
ctx.textAlign = "start";
else if (normalizedAngle > (Math.PI * 0.4) && (normalizedAngle < Math.PI * 0.6)) {
outerEdge.y += 5;
ctx.textAlign = "center";
}
else if (normalizedAngle > (Math.PI * 1.4) && (normalizedAngle < Math.PI * 1.6)) {
outerEdge.y - 5;
...