[DISCUSSION] custom chart types

[0kk3t]

http://www.chartjs.org/docs/latest/developers/charts.html#extending-existing-chart-types provides an example of a new chart type extending a bubble chart, but it is not complete:

• how to build a new chart type from scratch? Do you have to derive from an existing chart? Is there a root controller object?

• The comment is confusing:

// I think the recommend using Chart.controllers.bubble.extend({ extensions here });

What is recommend?

• Standard JS package / naming convention? use hyphens like chartjs-chart-financial or period like Chart.BarFunnel.js?

• Community list of extensions? Wiki would help!

[etimberg]

@0kk3t we can definitely improve the docs here. I'm happy to look at any PR improving this.

Regarding your specific questions:

1. You do not have to derive from a built in chart.
2. There is a root controller in Chart.DatasetController
3. Standard package naming for new charts would use hyphens (previously we used dots but that caused a lot of problems with npm/bower)
4. Community extensions are listed on http://www.chartjs.org/docs/latest/notes/extensions.html

[MichelaR]

I tried to derive from an existing chart just exactly as in the 'derivedBubble' example, but unfortunately I get an error 'derivedBubble is not a charttype' :(( has anyone an idea on what I'm missing?

[RHeijnen]

Just leaving a comment saying the new documentation about extending/controllers is very lackluster, and as of right now - the example of the controller implementation differs a lot from the extend implementation. So all the examples from extending are not applicable here.

I.e.

The example you made for someone who was having trouble removing the native padding from the Xas;

https://jsfiddle.net/gvdmxc5t/213/

draw: function(){ var xScalePaddingRight = -5 var xScalePaddingLeft = -5 this.scale.xScalePaddingRight = xScalePaddingRight this.scale.xScalePaddingLeft = xScalePaddingLeft Chart.types.Bar.prototype.draw.apply(this, arguments); this.chart.ctx.fillStyle="#FFF"; this.chart.ctx.fillRect(this.chart.canvas.width - xScalePaddingRight, 0, xScalePaddingRight, this.chart.canvas.height); }

There is no documentation on how to make this with controllers ?