Create a chart from a detached canvas element

[sathiya46]

I am trying to create a canvas dynamically in JavaScript and use the same for drawing the chart, Is it possible to draw charts before appending the created canvas to a div element ?

Environment

• Chart.js version: 2.1.0
• Browser name and version: Chrome 31.0.1650

[sathiya46]

My code below:

var canvas2 = document.createElement('canvas');
canvas2.id = "chart22";
canvas2.width = 1360;
canvas2.height = 740;
var ctx2 = canvas2.getContext("2d");
ctx2.font="arial";
ctx2.fillStyle = "#FFFFFF";
var chart2 = new Chart(ctx2, options2);

is this possible ?

[ericnkatz]

@sathiya46 I think you need to set { responsive: false }

[sathiya46]

When responsive = true;
Error: Cannot read property 'currentStyle' of null
When Responsive = false;
Error: Chart.min.js:13 Uncaught TypeError: Cannot read property 'insertBefore'

Code used for generating canvas:
var canvas2 = document.createElement('canvas');
canvas2.id = "chart22";
canvas2.width = 1360;
canvas2.height = 760;
var ctx2 = canvas2.getContext("2d");
ctx2.font="arial";
ctx2.fillStyle = "#FFFFFF";
var options2 = JSON.parse(sessionStorage.getItem('options22'));
var chart2 = new Chart(ctx2, options2);

Current options that I am using for the chart being created from the above code,
Options: {"type":"pie","data":{"labels":["xyz (38)","abc (36)","def (41)","gha (0)","leg (0)","ghj (0)","ghj (0)","rty (0)","ert (0)","ert (0)"],"datasets":[{"label":"Number of Alphabets by Words ","backgroundColor":["rgba(138, 46, 46, 0.5)","rgba(102, 102, 204, 0.5)","rgba(138, 46, 46, 0.5)","rgba(255, 136, 77, 0.5)","rgba(118, 19, 174, 0.5)","rgba(204, 102, 153, 0.5)","rgba(255, 215, 15, 0.5)","rgba(102, 204, 153, 0.5)","rgba(255, 215, 15, 0.5)","rgba(154, 174, 19, 0.5)"],"data":[38,36,41,0,0,0,0,0,0,0]}]},"options":{"animation":false,"responsive":false,"scaleBeginAtZero":true,"title":{"display":true,"fontSize":30,"text":"Number of HAPIs by Anatomical Location (All)"},"tooltips":{"enabled":false,"mode":"single"},"legend":{"display":true,"position":"bottom","labels":{"fontSize":30}}}}

Just need to know if it is even possible to do this kind of approach using chartjs ?

Thanks
Sid

[simonbrunel]

@sathiya46: it should be possible as long as you don't expect responsiveness (i.e. attach the canvas to the DOM after the chart creation with responsive: true). So @ericnkatz is right, but it seems you use an old version: responsive: false should not attempt anymore to access the parent node in latest versions.

Can you try to upgrade your environment?

[simonbrunel]

Duplicate of #3790?

[ericnkatz]

@ me 😉

[simonbrunel]

haha, just noticed I mentioned the wrong person :)

[etimberg]

Closing as duplicate of #3790

[simonbrunel]

@sathiya46 It took some time but it should work now (#4591) :) Are you able to test this development build and confirm that it works as you expect?

[maria-grigorieva]

@simonbrunel, hi, I have problems with dynamically created canvases in 2.8.0 version.
I'm trying to insert charts in DataTable, in "td" element. So, for each "td" I use appendChild() with add_shartJS() procedure. Chart data and options were taken from the documentation. The only difference is adding { responsive: false }.

add_chartJS(title) {
        var canvas = document.createElement("canvas");
        var id = 'chartjs_' + title;
        canvas.id = id;
        var ctx = canvas.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
                        }
                    }]
                },
                responsive: false
            }
        });
        return canvas;
    }

As a result, I have empty canvases.
Also, tried to use the development build from previous comment, just to be sure, but all the same.