Chart.JS : JQuery Canvas Chart plugin: ZoomOut and reDrawing (IMage resolution) issue

/**
 * 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%

Leave a comment