Use this plugin with angular-chart.js

[imsamdez]

Hi,

I'm discovering angular and I'll be interesting in using your plugin with angular-chart.js.

Is there any ways to do this ? I'm a bit lost even after looking at some other plugin integrations.

Help is much appreciate !

[mykola-digtiar]

Hi, of course it is possible to use the plugin with angular-chart.js I will provide more information about it in 2-3 days.

[RichardFans]

javascript:

vm.options =  {
                    tooltips: {
                        enabled: false
                    },
                    zoomOutPercentage: 68,
                    plugins: {
                        outlabels: {
                            stretch: 18,
                            lineWidth: 1,
                            font: {
                                resizable: false,
                                size: 10
                            }
                        }

                    }
                };

html:

<canvas id="wholeChartPie" class="chart-base"
                    chart-options="vm.options"
                    chart-type="'outlabeledPie'"
                    chart-data="vm.chartData" chart-labels="vm.chartLabels" chart-series="vm.chartSeries">
</canvas>

[jdlopezq]

Hi I'm tryin to get this work in angular 5, when i put this 'outlabeledPie' in chart-type, i get this error: Error: "outlabeledPie'" is not a chart type. And if i put it in the ts file the charts are render but only in gray scale, and whe i use the chart-type "pie" the labels always are out of the container, maybe you can help me pls :)

[Cristianopavan]

by any chance is that work with chart-funnel -js plugin thanks in advance

[Ahsan9981]

Is there any plugin for polar chart in chart.js for Angular ? Currently I am using datalabels plugin for this and this does not have anything to make the labels to stay outside polar chart rings and they move with the amount of data section displayed. I want these datalabels outside of these rings at fixed positions. Here is my code.

plugins: {
      datalabels: {
         color: '#000000',
         anchor: 'end',
         align: 'end',
         padding: 150,
         display: true,
         font: {
           weight: 'bolder'
         },
         formatter: function(value, ctx) {
          return `${ctx.chart.data.labels[ctx.dataIndex]} - ${value} %`;
       },
      },
    },