There is a controller with data

class FundraiserAboutController { constructor($stateParams, DataService) { this.labels = ["January", "February", "March", "April", "May", "June", "July"]; this.series = ['Series A', 'Series B']; this.data = [ [65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90] ]; this.onClick = function (points, evt) { console.log(points, evt); }; this.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }]; this.options = { scales: { yAxes: [ { id: 'y-axis-1', type: 'linear', display: true, position: 'left' }, { id: 'y-axis-2', type: 'linear', display: true, position: 'right' } ] } }; } } const FundraiserAboutComponent = { controller : FundraiserAboutController, template : require('./fundraiser-about-template.html') };

This is in View:

 <canvas id="line" class="chart chart-line" chart-data="$ctrl.data" chart-labels="$ctrl.labels" chart-series="$ctrl.series" chart-options="$ctrl.options" chart-dataset-override="$ctrl.datasetOverride" chart-click="$ctrl.onClick"> </canvas>

Import:

 import 'chart.js'; import 'angular-chart.js'; angular .module('app', [ 'chart.js' ]) .component('fundraiserAboutComponent', FundraiserAboutComponent)
  • How is the controller in the module declared? Are there any errors in the browser console? - Grundy
  • There are no errors at all, iframe appears, but the canvas is empty, now I will update with the controller indicated - Alexander Bondarenko

1 answer 1

I have not long encountered the same problem, I hope I can help.

In my case, the graphics were not drawn because of some options, namely due to the responsive and maintainAspectRatio . Try asking them true , in my case it solved the problem.

At the moment my config looks like this:

 var barChartOptions = { animation: false, responsive: true, maintainAspectRatio: true, elements: { rectangle: { borderWidth: 1 } }, tooltips: { mode: 'label' }, scales: { xAxes: [{ gridLines: { display: false } }], yAxes: [{ ticks: { beginAtZero: true }, gridLines: { display: false } }] } };
  • Can not help something else? - Alexander Bondarenko
  • set responsive to false and earned - Alexander Bondarenko
  • I had to wrap the canvas in the parent container, thanks for pushing - Alexander Bondarenko