Log in / Register

Forum › How do I...?

Trying to render a chart with Chart.js

rob.g
I'm running prince with 
prince test.html --javascript -o test.pdf; open test.pdf;


I get the following error:
prince: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js:3902: error: NotSupportedError: feature not supported

The line it refers to is
canvas.width = me.width = newWidth;


I thought canvas was implemented in Prince so I'm not sure what the problem would be. Maybe I need to wait a minute for the graph to render before printing (I know docraptor has a "wait" settings but I didn't see anything similar in the prince command line docs).

My full html is below in case someone else wants to try running it.

Thanks for any help!

<html>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
        <script>
            var ctx = document.getElementById("myChart").getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });
        </script>
    </body>
</html>


mikeday
The issue is that helpers.getMaximumWidth is returning NaN, presumably because it depends on container.clientWidth which Prince doesn't support yet.

Chart.js will need some compatibility adjustments in order to work with Prince, since Prince runs all JavaScript before typesetting and layout.