The chart renders low resolution image when animation is set to false

Hi guys,

I am trying Charts js in one of our solutions and i ran into the issues of getting very low resolution image when animation is set to false. Below is the example of the chart i am using. When animation and responsive both set to true, everything works as expected. When they are set to false, the chart rendered as very low resolution image. I need it to be not responsive and not animated because we use charts to generate PDF reports with WKHtmlToPdf library/toolkit. The v1.+ worked fine in that same configuration (responsive: false, animation: false). var barChartData = { labels: ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5", "Week 6", "Week 7"], datasets: [{ type: 'bar', label: "Standard", data: [200, 185, 590, 621, 250, 400, 95], fill: false, backgroundColor: '#61A4DD', borderColor: '#61A4DD', hoverBackgroundColor: '#61A4DD', hoverBorderColor: '#61A4DD', yAxisID: 'y-axis-1' }, { type: 'bar', label: "Premium", data: [240, 195, 720, 780, 300, 500, 150], fill: false, backgroundColor: '#F47E7A', borderColor: '#F47E7A', hoverBackgroundColor: '#F47E7A', hoverBorderColor: '#F47E7A', yAxisID: 'y-axis-1' }, { label: "Estimated Rebate", type: 'line', data: [51, 65, 40, 49, 60, 37, 40], fill: false, borderColor: '#EC932F', backgroundColor: '#EC932F', pointBorderColor: '#EC932F', pointBackgroundColor: '#EC932F', pointHoverBackgroundColor: '#EC932F', pointHoverBorderColor: '#EC932F', yAxisID: 'y-axis-2' }] };

window.onload = function () {
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
            responsive: false,
            animation: false,
            tooltips: {
                mode: 'label'
            },
            elements: {
                line: {
                    fill: false
                }
            },
            scales: {
                xAxes: [{
                    display: true,
                    stacked: true,
                    gridLines: {
                        display: false
                    },
                    labels: {
                        show: true,
                    }
                }],
                yAxes: [{
                    type: "linear",
                    stacked: true,
                    display: true,
                    position: "left",
                    id: "y-axis-1",
                    gridLines: {
                        display: false
                    },
                    labels: {
                        show: true,

                    }
                }, {
                    type: "linear",
                    display: true,
                    position: "right",
                    id: "y-axis-2",
                    gridLines: {
                        display: false
                    },
                    labels: {
                        show: true,

                    }
                }]
            }
        }
    });
};

[leifdejong]

@etimberg @apryiomka My solution was slightly different as I couldn’t get the above one to work in Phantom 2. I rendered the charts with a large canvas to get the resolution up and then converted it into a png finally destroying and removing the old canvas and replacing them with an image with responsive CSS classes. Adjusting the knobes on the canvas width and height in addition to Chart.js options will get you a perfect render. We were able to get our rendering speed up with the approach (alternative to SVG renders) and the file size down.

HTML:

<div class="container">
  <!-- generated images -->
  <img id="someIdImage" class="img-responsive"></img>

  <!-- temporary canvas -->
  <canvas id="someId" width="2000" height="600"></canvas>    
</div>

Javascript:

/**
 * _plot() plot with Chart.js
 *
 * @param {Function} callback
 */
 function _plot(callback) {
  var config = {}; // some Chart.js config
  var id = 'someId';
  var el = document.querySelector('#' + id);
  var el2d = el.getContext('2d');

  // plot instance
  var instance = new Chart(el2d, config);

  // generate and append image
  document.querySelector('#' + id + 'Image').setAttribute('src', el.toDataURL('image/png'));

  // destroy instance
  instance.destroy();
  el.parentElement.removeChild(el);

  // callback
  if (callback) {
    callback();
  }
}

[leifdejong]

@etimberg this solution is no longer working