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

i have created 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 code in file , referenced in 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 try use i'm not getting chart object in debugger:

new chart(ctx.children[0].getcontext("2d")).linewithrectangle(data, { pointhitdetectionradius: 0.05, animation: false, startindex: start, endindex: end }) 

chrome not reporting charttype object built in chart types says "not available".

what doing wrong here?

your code expects different values ctx in main code vs. extension. in main code seems dom node , in extension using context.

just add

  var ctx = this.chart.ctx; 

after chart.types.line.prototype.draw.apply(this, arguments); , should work. if not, check if main code variables defined correct values (start, end , ctx)