score:2
as @martin pointed it out, it is an issue of chart.js not showing the chart when initiliazed in a hidden dom element (its height and width remain at 0px even after showing the hidden element).
this issue is tracked here.
i share you my home made solution if you are blocked by components like tabs initialized hidden. i have created a directive in which i compile the canvas element. in order to be able to refresh the element when needed (eg when the tab is opened), i watch an attribute i will manually change on tab change in my controller.
here is my directive :
app.directive('graphcanvasrefresh', ['$compile', function($compile) {
function link(scope, elem, attrs) {
function refreshdom() {
var markup = '<canvas class="chart chart-pie" id="graph" data="entitygraph.data" labels="entitygraph.labels" legend="true" colours="graphcolours" ></canvas>';
var el = angular.element(markup);
compiled = $compile(el);
elem.html('');
elem.append(el);
compiled(scope);
};
// refresh the dom when the attribute value is changed
scope.$watch(attrs.graphcanvasrefresh, function(value) {
refreshdom();
});
// clean the dom on destroy
scope.$on('$destroy', function() {
elem.html('');
});
};
return {
link: link
};
}]);
dirty as hell, but this is a working solution you can use waiting for chart.js update. hope it can help someone.
score:0
added some functionally to @bviale answer.
app.directive('graphcanvasrefresh', function ($compile, $timeout) {
return {
scope:{
labels: "=",
data: "=",
type: "=",
refresh: "="
},
link: function (scope, elem, attrs) {
function refreshdom() {
var markup = '<canvas class="chart chart-' + scope.type + '" id="' + scope.type + scope.$id + '" chart-labels="' + scope.labels + '" ' +
'chart-legend="false" chart-data="' + scope.data +'" ></canvas>';
var newel = $compile(markup)(scope.$parent.$new());
elem.html(newel);
scope.refresh = false;
};
// refresh the dom when the attribute value is changed
scope.$watch('refresh', function (value) {
$timeout(
refreshdom(), 100);
});
// clean the dom on destroy
scope.$on('$destroy', function () {
elem.html('');
});
}
};
});
Source: stackoverflow.com
Related Query
- Chart.js in AngularJS tabset does not render
- Bar Chart of ChartJS does not Render
- Chartjs does not render chart when set responsive option to true
- ChartJs Memory Leak | Garbage Collection does not clean Chart Object or Arrays after render
- Charts.js does not render chart until I open the console
- Why ChartJS's Bar Chart does not render bar for a specific value?
- ChartJs does not render chart when binding canvas id in Angular
- Chart.js line chart does not render data lines on iOS
- React js with react-chart js, does not render doughnut chart
- React-chart does not render the legend for PIE chart
- Adding new data to empty Chart.js chart does not render new data correctly
- Edge browser does not render chart using chart js
- Chart.js - Line chart does not render all points when using Point[] format
- Html chart does not fit a small Android WebView
- Chart looks only grey, does not show the color - Chartjs,discordjs
- Wkhtmltopdf does not render Chart.JS 2.5.0 graph
- Angular-chart.js - Make line chart does not curve
- Vue Chart.js component does not render
- Chart.js Chart in Angular does not load until resizing browser window
- My pie chart (chartJs) does not appear
- Chart.js chart does not display when inside an ngIf.
- Chartjs bar-chart does not render when values are equal
- Adding object data to data structure of chart.js chart does not show any data
- Chart does not display on webpage in Django app (with Chart.js)
- Chart.JS does not render and display a sad face icon
- fill: 'origin' property does not work for my chart
- Angular-Charts bar chart does not update when I change the data, series, labels
- Bar chart does not appear with Chart.js
- Chartjs backgroundColor for line chart does not appear in Vue app
- Chart.js Chart does not start at
More Query from same tag
- Chart JS not displaying graph
- How to show label for second y-axis in charts.js?
- How can I change color of only one column in Barchart using Chart.js
- why i have this error Utils is not defined when i want create a chart from chart.js
- Range at the end of the line chart
- Render Chart.js on backend side ASP.NET
- Chart.js 3.x custom positioners: cannot use them in TypeScript
- Is there a way to change color of a chart's grid in y-axis - ng2-charts
- (Chart.js) Is there a way to compare one chart with another so as not to have this inconsistent effect of small values being as big as big values?
- How to set 3 axis in google chart (V-Axis Left as Qty, V-Axis Right as Series Column and H-Axis as TimeOrder)?
- How to move labels' position on Chart.js pie
- How to enable timescale in chart.js line chart?
- Chart.js: call method outside of onRefresh() method
- How to fetch all data from API files and assign their values to chart?
- Chart.js - Timeline
- Text inside Doughnut chart using Chart.js and Angular2, Ionic2
- ChartJS: Get value from another another Chart
- How to stop axis label from being cut off in chart JS?
- How to use canvasjs to draw column chart using text data
- Module not found: Can't resolve 'chart.js/auto
- How do I display chart on my HTML page based on JSON data sent by Node JS
- How do you disable tooltips in ember-cli-chart?
- Remove gridlines in AngularCharts
- Overlay loading indicator before data and charts are loaded
- Why is my line chart using multiple lines to connect random points? (Chart.js)
- How to make Laravel Charts
- Creating and Updating Graph in HTML and Javascript
- jQuery convert hex to rgba
- How to customize Title position with ChartJS
- AngularJS/ChartJS: Get the current series