/** * Renders the charts in specified Divs * @param data * @param idOfCanvas */ function renderPie(data, idOfCanvas) { var $canvas = $('#' + idOfCanvas); var $parent = $canvas.parent(); /** * Canvas needs to be removed and re-rendered before we draw the chart * Reason: When Chart is rendered and Window is Zoomed Out, On hovering the chart produces * glitch in the chart */ $canvas.remove(); $parent.prepend("<canvas width='" + WIDTH_OF_PIE + "' height='" + HEIGHT_OF_PIE + "' id='" + idOfCanvas + "'>"); var ctx = $parent.find('#' + idOfCanvas).get(0).getContext("2d"); var chart = new Chart(ctx).Pie(data, { maintainAspectRatio: true, responsive: false, // String - Template string for single tooltips tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>", //String - A legend template legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%> <strong><%=segments[i].value%></strong><%}%></li><%}%></ul>" }); var legend = chart.generateLegend(); $('#' + idOfCanvas + '-legend').html(legend); }
yes it works, I have tested
I my case, I have a ‘select’ with list of locations. With each location data reloads in pie.
Issue ( Only when window is Zoomed Out) : With each reload the width and height of the canvas decreased continuously. Ultimately after 4 to 5 reloads the pie almost vanishes.
Solution: Before every reload, delete the previous canvas so that the older canvas along with its values is deleted.
responsive:true
is not the solution, irrespective of responsive:true
the chart’s size goes on decreasing for -ve zoom and increases for +ve zoom : Condition: The Window’s zoom must not be 100%