How do you create an extension to Chart.js? - chart.js

Question

I have created a new chart type:
Chart.types.Line.extend({
name: "LineWithRectangle",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var startPoint = this.datasets[0].points[this.options.startIndex]
var endPoint = this.datasets[0].points[this.options.endIndex]
var scale = this.scale
this.chart.ctx.fillStyle = "#808080";
ctx.globalAlpha = 0.2;
this.chart.ctx.fillRect(startPoint.x,
scale.startPoint,
endPoint.x - startPoint.x,
scale.endPoint - scale.startPoint);
ctx.stroke();
ctx.globalAlpha = 1;
this.chart.ctx.textAlign = 'center';
this.chart.ctx.fillText("EVENT DAY",
startPoint.x + (endPoint.x - startPoint.x) / 2,
scale.startPoint + 20);
}
});
I placed this code in another file and referenced in the page :
<script src="~/lib/charts-js/Chart.js" type="text/javascript"></script>
<script src="~/lib/charts-js/ChartExtensions.js" type="text/javascript"></script>
But when I try to use it I'm not getting a chart object in the debugger:
new Chart(ctx.children[0].getContext("2d")).LineWithRectangle(data, { pointHitDetectionRadius: 0.05, animation: false, startIndex: start, endIndex: end })
Chrome is not reporting a ChartType object like it does for built in chart types but says "not available".
What am I doing wrong here?

Answer 1

Your code expects different values for ctx in the main code vs. your extension. In your main code it seems like a DOM node and in your extension you are using it as a context.
Just add
var ctx = this.chart.ctx;
after Chart.types.Line.prototype.draw.apply(this, arguments); and it should work. If not, check if your main code variables are all defined with correct values (start, end and ctx)