score:7
Accepted answer
You don't have to use {{}} when it's data from the scope, so you have to change like this :
<canvas
class="chart chart-line"
data="graph.data"
labels="graph.labels"
series="graph.series"
options="graph.options"
legend="graph.legend"
ng-show="graph.visible">
</canvas>
Furthermore, data should be an array of array like
$scope.graph.data = [[1, 2, 3, 4, 5, 6, 7, 8]];
See the working Plunker here (fixed by Grundy in the comments) : http://plnkr.co/edit/xQ42shTY6qrteNXOYX2F?p=preview
score:8
Adding following div
container over the canvas
solved the problem for me,
check the following:
<div class="chart-container" ng-show="graph.visible">
<canvas #myChart class="my-4" width="900" height="380"></canvas>
</div>
Source: stackoverflow.com
Related Query
- Angular-Chart not rendering anything
- Series Details Not Showing in Angular Chart with Charts.js
- Chartjs not rendering chart and no error thrown
- Chart.js Chart in Angular does not load until resizing browser window
- Chart JS not rendering on iOS devices
- Chartjs (Non Vue) Not Rendering Graph Chart inside V-if/V-show
- Chart not rendering w/Chart.js on button click
- Chart.js chart not rendering
- chart annotations not showing in Angular 2
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
- Css style not working well when resizing chart height in angular application
- Chart JS chart not rendering in ArcGIS popup when using navigation arrows
- charts js, doughnut chart not rendering tooptips correctly
- Passing Array to Chart.js not working, chart not rendering
- Why is this bar chart using chart.js not rendering in react.js?
- Chart not rendering with pug/jade and nodejs
- Dynamic data in bar chart not rendering React js
- PrimeNG chart js is not rendering
- Chart.js in Angular 10: Specified colors not shown in multi-series bar chart (instead random colors)
- Chart.js not rendering chart with data from mySQL database
- ChartJS line chart x = y not rendering astraight line
- $scope variable do not respond to the onClick function of angular chart
- Angular + Ng2 Charts: Chart not displaying as Child Component
- angular 4 line chart data is not showing data from http get
- ChartJs does not render chart when binding canvas id in Angular
- Vue-chartjs not rendering chart until page resize
- donut chart not rendering with csv data chart.js
- Chart is not rendering properly time axis
- Chart not rendering on ChartJS
- Chartjs chart not rendering with pug template
More Query from same tag
- How to embed chart.js in angular-seed
- Uncaught (in promise) TypeError: Cannot read property 'length' of undefined in chartjs with Vuejs
- Angular 4:PrimeNg DoughnutChart dynamic data issue.
- Chart.js multiple series with same scale
- How to add links to chart.js (Doughnut Charts)?
- ng2 chart multiple chart update
- chart.js 3 stacked bar chart - tooltip showing for zero values
- Chart.js remove the first vertical line
- Chart.js click event to open a custom tooltip does not work sometimes
- Beginner using chart.js: having trouble display state full of data into a column chart using variables
- charts.js not updating after ajax request
- Is there a global setting in Chart.js for beginAtZero?
- How to disable event during a state change
- Does ChartJS supports Jquery 3.4.1
- chart.js remove on hover effect
- How to update your django page by looking for new data in the db?
- How to display data values on Chart.js
- How to put 2 charts next to each other
- Animate datasets separately
- Charts.js: thin donut chart background
- Using Chart.js in Web Worker
- Passing Array to Chart.js not working, chart not rendering
- How to fill my chart (chart.js) with my own data from API
- Chart JS remove x-axis and y a-xis visibility
- Vue-Charts label numbers to the side of a bar chart
- How to download chart js image as bmp
- How to display labels outside the pie chart border?
- Impossible to render multiple charts with chart.js
- Error says Chart is not defined
- Chartjs pie chart tooltip mode label