Load ChartJS via VueJS - ChartJS empty and 0px dimension

Question

Alright, so I am trying to create a ChartJS instance via VueJS so that I could easily update its data via AJAX requests inside the component.

Basically it is working, the ChartJS instance gets created but it is empty and has a height and width of 0 and when I resize it via console it is still empty.

So what would be the best way of creating a "ChartJS Component" with VueJS or where is the fault in my code below?

The very basic way I want to load chart is like this.

<chart :resource="'https://httpbin.org/get'"></chart>

This is the basic component

var Vue = require('vue'); Vue.component('chart', { template: require('./template.html'), props: ['resource'], data: function() { return { startingData: {}, latestLabel: {}, } }, ready: function() { // here I would load the js data and set the startingData }, });

This is the directive which I use to pass down the data from the component. I do it this way to get this.el so that I can get the Context of it

Vue.directive('loadData', function(value) { var startingData = { labels: [1, 2, 3, 4, 5, 6, 7], datasets: [{ fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", data: [28, 48, 40, 19, 86, 27, 90] }] }, latestLabel = startingData.labels[6]; var liveChart = new Chart(this.el.getContext('2d')).Bar(startingData); setInterval(function() { liveChart.addData([Math.random() * 100], ++latestLabel); liveChart.removeData(); }, 1000); });

This is the template of the component

<canvas width="960" height="300" v-load-data="startingData"></canvas>

Community · Accepted Answer · 2017-05-23 11:59:34Z

You are concerned by this issue. Your graph does not render because, as you pointed out, the graph has a height and width of 0. I had this problem while working with tabsets, and I solved it by redrawing the graph with a directive like this :

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 }; }]);

Hope this can help you

Collectives™ on Stack Overflow

Load ChartJS via VueJS - ChartJS empty and 0px dimension

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related