line chart with ChartJS
HTML
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>
JavaScript
Chart.types.Pie.extend({
name: "PieAlt",
initialize: function(data){
Chart.types.Pie.prototype.initialize.apply(this, arguments);
var requiredSpace = 0;
for (var i = 0; i < data.length; i++)
requiredSpace = Math.max(ctx.measureText(Chart.helpers.template(this.options.tooltipTemplate, data[i])).width, requiredSpace);
this.outerRadius -= (requiredSpace + 20);
},
draw: function(data){
Chart.types.Pie.prototype.draw.apply(this, arguments);
var self = this;
ctx.save();
ctx.font = Chart.helpers.fontString(self.options.scaleFontSize, self.options.scaleFontStyle, self.options.scaleFontFamily);
ctx.textBaseline = "middle";
self.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 + 20,
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;
ctx.textAlign = "center";
}
else
ctx.textAlign = "end";
ctx.fillText(Chart.helpers.template(self.options.tooltipTemplate,...