Some charts don't show until mouseover

[tiagosiebler]

Overview

Describe the issue. What is the issue and what did you expect? I have a number of charts in a page. An ngRepeat loop runs through a JS object, and renders a graph for each object using the canvas tag. This works very well, unless I reach a certain number of charts.

At a certain point, a few of my charts render, but appear partially rendered:

See the pie chart on the bottom right? As soon as I hover my mouse over it, it flicks into the completed view:

It's like it freezes mid-rendering animation, while the others work. It won't always be the same one. Sometimes this particular one works, but others don't. It affects the line and bar charts too sometimes.

There are roughly 10 charts on this page. This is the first time I've seen this happening.

Has anyone seen this before? I'll try to reproduce this in a simplified fiddler.

Tiago

[jtblin]

Thanks, yes I've seen that happening in the integration tests and I've used a $timeout to solve the issue (the chart was not appearing at all in this case): https://github.com/jtblin/angular-chart.js/blob/master/test/fixtures/charts.js#L31. I think it's only happening since Chart.js 1.1.1 and it is not happening with the new 2.0 version of Chart.js (https://github.com/jtblin/angular-chart.js/tree/chartjs-2.0) so it isn't very high in my to do list. Which version of angular-chart.js and Chart.js do you use?

[tiagosiebler]

Thanks for the quick response! Chart.js is at 1.1.1. Angular-chart.js I think is at the same version as the one found here: https://github.com/jtblin/angular-chart.js/blob/master/dist/angular-chart.js

Mine: https://github.com/tiagosiebler/Shine_AngJS_Version/blob/master/src/js/vendors/angular/angular-chart.js

Is that 0.10.2?

In my integration of angular-chart, I've wrapped the whole thing in a directive: https://github.com/tiagosiebler/Shine_AngJS_Version/blob/master/src/js/app/directives/graphs/graphs.js

I then have a predefined list of charts to get from the server: https://github.com/tiagosiebler/Shine_AngJS_Version/blob/master/src/partials/pages/reporting/orders.html

My directive fetches the dataset for each and stores all of them inside $scope.graphs. With ngRepeat, each is then rendered through your canvas directive: https://github.com/tiagosiebler/Shine_AngJS_Version/blob/master/src/partials/subelements/graphs_wrapped.html

I guess I need to try and integrate the 2.0 version Chart.js and angular-chart.js and see how it behaves. Or see if I can manipulate the options on a timeout. I also saw the graph shrink in size when toggling the legend after the chart has rendered, though that seems likely to be a different issue. If you have any ideas here, I'd be happy to hear them. Thanks for your integration with angular, it works very well otherwise! :-)

[gvn182]

Same issue here.

[tiagosiebler]

@gvn182 I haven't yet had a chance to try out the newer chart.js and angular-chart.js. Have you had a chance to try that?

[gvn182]

@tiagosiebler yep, I tried the pre alpha branch in my project without changing anything I had.

My 3 pie charts are working very well but the legends are gone.

My bar chart is only showing 1 series

The problem I had with chart not showing seems to be gone.

[jtblin]

@gvn182 the legend is controlled in the options now e.g. https://github.com/jtblin/angular-chart.js/blob/chartjs-2.0/examples/app.js#L62

$scope.options = { legend: { display: true } };

[teone]

I tried to update angular-chart to 1.0.0-alpha6 and my charts are not appearing anymore with no errors in the console. Do I need to update something in the config/options?

Here is the entry in my bower.json: "angular-chart.js": "https://github.com/jtblin/angular-chart.js.git#1.0.0-alpha6"

[nkoterba]

Facing same issue I believe. We are showing multiple charts via an ng-repeat on a directive we wrote that includes angular-chart directives inside of ours. However, as of late, some of the charts don't appear at all until I mouseover OR resize the browser window:

This wasn't happening a few months ago and nothing has changed in our production code so I can only assume that:

• browser updates
• library version updates

Will continue to dig into this...

[gvn182]

@teone did you update your chart.js to version 2.0?

[teone]

@gvn182 Sure:

"angular-chart.js": "https://github.com/jtblin/angular-chart.js.git#1.0.0-alpha6",
"Chart.js": "2.0.0"

[nkoterba]

@gvn182 No not yet. I've read through the suggestions here:

• $timeout works but only if I set the timeout to be 500ms or greater; this seems brittle as I bet its dependent on how fast/quickly the browser renders everything, which is highly machine dependent; I'd rather not have users on fast computers delayed and who knows if my timeout value will be high enough to handle really slow computers

Am now looking at switching to the to the angular-charts version that uses chart.js 2.0.

[gvn182]

@nkoterba I did the same, I changed to the pre-alpha version. The only thing you will need to change is the way you activate legends.

[gustavogsimas]

I also updated to the pre-alpha version and now its working, but the legends still aren't showing, even with this new type of activation.

My Options: $scope.chart_types.options = { scaleFontSize: 15, tooltipFontSize: 15, tooltipTitleFontSize: 15, maintainAspectRatio: false, legend: { display: true, position: 'bottom' } };

My Html: <canvas id="bar" class="chart chart-bar" chart-data="chart_types.data" chart-labels="chart_types.labels" chart-series="chart_types.series" chart-colors="chart_types.colours" chart-click="onClick" options="chart_types.options"> </canvas>

[jtblin]

The markup attribute is chart-options not options.

[khadirbaaoua]

If it helps anyone, upgrade to 1.0.0-alpha6 did solve the issue on my side

cheers

[lypborges]

I also had that issue, than a follow the @khadirbaaoua tip, and worked well.

Used Chart.js 2.0.0-beta2 with 1.0.0-alpha6

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta2/Chart.min.js https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.0-alpha6/angular-chart.min.js

[mikemix]

My charts are showing now without any problems (with the 0.10.2 release). I had to put this code just after I assign the data to the chart's scope window.dispatchEvent(new Event('resize'));

[liuqiyuan]

@lypborges updated the version helped me.

[fauria]

Same issue here, using 0.10.2 release. Im fetching the chart data through a service ($resource), and does not render chart2 unless the mouse is moved over it:

vm.myCharts = {
  chart1: MyService.get({ param: 'foo' }),
  chart2: MyService.get({ param: 'bar' })
};

It seems to be a $proimise related issue, as this renders the charts perfectly:

MyService.get({ param: 'foo' }).$promise.then(function(fooData) {
  MyService.get({ param: 'bar' }).$promise.then(function(barData) {
    vm.myCharts = {
      chart1: fooData,
      chart2: barData
    };
  });
});

[jtblin]

Yeah adding a $timeout may help as well. I'd recommend moving to chart.js 2.x, angular-chart.js 1.x.

[keepsilentw]

same issue. When moving to chart.js 2.x, angular-chart.js 1.x, angular-chart.js/dist/angular-chart.min.css will lost, and I can't set own colors, besides The labels will lost.

[jtblin]

@tww316 please look at breaking changes in readme.

[reybalgs]

I updated my angular-chart.js to 1.0.0-alpha6 and my Chart.js to 2.0.0 as per the suggestion of the people above. However, the bug still persists. The charts do not animate and they only show up when you mouse over them.

[reybalgs]

Switching from pies to donuts seems to alleviate the issue. I was using three pie charts before, turned them into donuts and now they work.

[fabrikate]

I had this same issue with a pie chart. After including the code from @mikemix the charts render without a problem!

P.S. Using current versions of both angular and chart.js

[keepsilentw]

Updating to 1.x is costly. I have to change all the chart-colours to chart-colors in my project. That's really not a good solution.

[jtblin]

@tww316 a simple find and replace would do that... there are more breaking changes though. I am not planning to keep supporting the 0.x branch tbh so there's probably not a lot of choices. Using $timeout solved the problem for me in the past.

[tiagosiebler]

@jtblin Hi there, finally had a chance to test the newer versions of this. Angular-chart.js 1.0.2 with Chart.js 2.2.1, downloaded via npm.

So far this issue seems to be gone, but I can't seem to get the chart-colours parameter working for pie charts. If I understood correctly, this was renamed from chart-colours to chart-colors. Previously, I passed this into the parameter to predefine the colours used for pie charts:

[
                        { // light blue
                            highlightFill: "rgba(102, 175, 249, 0.2)",
                            strokeColor: "rgba(102, 175, 249, 1)",
                            pointColor: "rgba(102, 175, 249, 1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,0.5)"
                        },
                        { // yellow
                            highlightFill: "rgba(253,180,92,0.2)",
                            strokeColor: "rgba(253,180,92,1)",
                            pointColor: "rgba(253,180,92,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(253,180,92,0.5)"
                        },
                        { // purple
                            highlightFill: "rgba(175, 101, 255,0.2)",
                            strokeColor: "rgba(175, 101, 255,1)",
                            pointColor: "rgba(175, 101, 255,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(175, 101, 255,0.5)"
                        },etc

This worked fine before. Looking at the documentation, these properties have renamed, so I've tried this but all pie charts show as black:

[
                        { // light blue
                            backgroundColor: "rgba(77,83,96,0.2)",
                            borderColor: "rgba(102, 175, 249, 1)",
                            hoverBackgroundColor: "rgba(151,187,205,0.5)"
                        },
                        { // yellow
                            backgroundColor: "rgba(253,180,92,0.2)",
                            borderColor: "rgba(253,180,92,1)",
                            hoverBackgroundColor: "rgba(253,180,92,0.5)"
                        },
                        { // purple
                            backgroundColor: "rgba(175, 101, 255,0.2)",
                            borderColor: "rgba(175, 101, 255,1)",
                            hoverBackgroundColor: "rgba(175, 101, 255,0.5)"
                        },etc

I also saw that while this works for other charts, the pie charts in Chart.js seem to take a color array, so I've tried this instead, passed into the chart-colors parameter:

[
                        {
                            backgroundColor:[
                                "rgba(77,83,96,0.2)",
                                "rgba(253,180,92,0.2)",
                                "rgba(175, 101, 255,0.2)",
                                "rgba(255, 40, 44, 0.2)",
                                "rgba(96, 255, 173, 0.2)",
                                "rgba(220,220,220,0.2)"
                            ],
                            borderColor:[
                                "rgba(77,83,96,0.5)",
                                "rgba(253,180,92,0.5)",
                                "rgba(175, 101, 255,0.5)",
                                "rgba(255, 40, 44, 0.5)",
                                "rgba(96, 255, 173, 0.5)",
                                "rgba(220,220,220,0.5)"
                            ],
                            hoverBackgroundColor:[
                                "rgba(77,83,96,0.5)",
                                "rgba(253,180,92,0.5)",
                                "rgba(175, 101, 255,0.5)",
                                "rgba(255, 40, 44, 0.5)",
                                "rgba(96, 255, 173, 0.5)",
                                "rgba(220,220,220,0.5)"
                            ],
                        }
                    ]

After this, pie charts are showing colours again, but I have no control over what colours are shown, and the sections of the chart always have the same colour - here's the difference in two refreshes:

Have you seen this before? Do you know if I'm passing custom colours into the pie chart correctly, or do you have an example showing how to set these colour properties in pie charts rendered through your directive?

Thanks! Tiago

[tiagosiebler]

@jtblin could this be a side effect of the issue described in bug #442?

[gustavogsimas]

@tiagosiebler This is how I pass colors to my pie chart: In the controller:

$scope.chart_situations.colours = ["#9FCC00","#FA6D21","#9a9a9a","#E9B145","#62A073","#FA605D"]

In the view: chart-colors="chart_situations.colours"

[tiagosiebler]

@twizzzlers thanks! that seems to work!

Any ideas on passing rgba values? The same doesn't seem to work with rgba:

$scope.chart_situations.colours = ["rgba(77,83,96,0.2)","rgba(253,180,92,0.2)","rgba(175, 101, 255,0.2)","rgba(255, 40, 44, 0.2)","rgba(96, 255, 173, 0.2)","rgba(77,83,96,0.2)","rgba(220,220,220,0.2)"];

I guess that's a large part of the problem with all my testing so far.

[jtblin]

@tiagosiebler it should work, it's how colors are passed by the lib natively. You may want to open a separate issue with repro steps if you want some help as I don't think it's related to this issue here.

[tiagosiebler]

@jtblin fair enough, I'll work on that. I would mark this issue as resolved, with the solution being a migration to at least Angular-chart.js 1.0.2 with Chart.js 2.2.1 or newer, if there are no plans in addressing this in previous releases.

[jtblin]

Makes sense. Another option with 0x is to use a version of Chart.js pre 1.1.1 . It only started from 1.1.1 IIRC.

But moving to angular-chart.js 1.x with Chart.js 2.x is definitely the recommended path.