How to use custom rendering methods of chartJs through ng2-charts angular?

Question

I have a JFiddle example here which has rounded curves on bars: https://jsfiddle.net/qjae6xyp/

On the bars you are seeing there are curves on top. There is a method below which draws those corners

Chart.types.Bar.extend({
    name: "BarAlt",
    initialize: function (data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);

        if (this.options.curvature !== undefined && this.options.curvature <= 1) {
            var rectangleDraw = this.datasets[0].bars[0].draw;
            var self = this;
            var radius = this.datasets[0].bars[0].width * this.options.curvature * 0.2;

            // override the rectangle draw with ours
            this.datasets.forEach(function (dataset) {
                dataset.bars.forEach(function (bar) {
                    bar.draw = function () {
                        // draw the original bar a little down (so that our curve brings it to its original position)
                        var y = bar.y;
                        // the min is required so animation does not start from below the axes
                        bar.y = Math.min(bar.y + radius, self.scale.endPoint - 1);
                        // adjust the bar radius depending on how much of a curve we can draw
                        var barRadius = (bar.y - y);
                        rectangleDraw.apply(bar, arguments);

                        // draw a rounded rectangle on top
                        Chart.helpers.drawRoundedRectangle(self.chart.ctx, bar.x - bar.width / 2, bar.y - barRadius + 1, bar.width, bar.height, barRadius);
                        ctx.fill();

                        // restore the y value
                        bar.y = y;
                    }
                })
            })
        }
    }
});

But problem is I have angular project and using ng2-charts. https://stackblitz.com/edit/ng2-charts-bar-template-kkmuqx?file=src/app/app.component.ts

This example is a demonstration of my angular project.And I have horizontalBar chart here.I've been searching for many days to implement this rounded corner functionality here on ng2-charts but I couldn't be able to access that custom method through angular ng2-charts.I would be super-glad if someone could come up with my stackblitz example to show how it should be implemented.

https://stackblitz.com/edit/ng2-charts-bar-template-kkmuqx?file=src/app/app.component.ts

Were you going to attempt to convert that javascript to typescript, or were just hoping someone here would do that for you? — R. Richards, Jun 06 '20 at 13:36
I attempted and didnt work anything I've tried.Maybe someone knows how to run this function directly who knows — Timuçin Çiçek, Jun 06 '20 at 13:55
If you attempted something, then show that code in the post. — R. Richards, Jun 06 '20 at 13:56

uminder · Accepted Answer · 2020-06-06T14:42:50.793

1

This answer to a similar question provides excellent code that can be used in Angular together with ng2-charts. It uses the Chart.elements.Rectangle.prototype.draw function. I adapted it slightly to fit your needs.

Please have a look at the following StackBlitz.

edited Jun 06 '20 at 14:42

answered Jun 06 '20 at 14:34

uminder

23,831
5
37
72

Glad I could help. The hard work however was done by [user320676](https://stackoverflow.com/users/320676/user320676) who came up with https://stackoverflow.com/a/48661443/2358409. – uminder Jun 06 '20 at 14:47
but interestingly when I attempt to type Chart.elements it gives me error like Property 'elements' does not exist on type 'typeof import ..... Do you know why I'm having this? – Timuçin Çiçek Jun 06 '20 at 15:17
Did you import `Chart`, same as I did in my `StackBlitz`? `import { ChartOptions, ChartType, ChartDataSets, Chart } from 'chart.js';` – uminder Jun 06 '20 at 16:13
yes I did same.Everything works as expected just this error is annoying and doesnt let me to start project without compiling twice – Timuçin Çiçek Jun 07 '20 at 20:36

How to use custom rendering methods of chartJs through ng2-charts angular?

1 Answers1