Impossible to configure the plugin

[romain-granai]

Hi,

Can someone spot the mistake in this, the 10 seconds delay is not working, neither the yOffset, actually nothing works. The plugin is working, it renders the charts as soon as the first pixel is in the viewport, but impossible to configure it.

Thank you

                  options: {
            legend: {
                display: false
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        var allData = data.datasets[tooltipItem.datasetIndex].data;
                        var tooltipLabel = data.labels[tooltipItem.index];
                        var tooltipData = allData[tooltipItem.index];
                        var total = 0;
                        for (var i in allData) {
                            total += allData[i];
                        }
                        var tooltipPercentage = Math.round((tooltipData / total) * 100);
                        //return tooltipLabel + ': ' + tooltipData + ' (' + tooltipPercentage + '%)';
                        return tooltipLabel + ': ' + tooltipData + '%';
                    }
                }
            },
            plugins: {
                deferred: {           // enabled by default
                    enabled: true,
                    xOffset: 150,     // defer until 150px of the canvas width are inside the viewport
                    yOffset: '500%',   // defer until 50% of the canvas height are inside the viewport
                    delay: 10000        // delay of 500 ms after the canvas is considered inside the viewport
                }
            }
        }

[simonbrunel]

Well, that's my fault, I didn't release latest changes in master since it introduces a breaking change due to that specific way to set options and I was waiting for more stuff to make a proper 1.0.0 release. Your code is supposed to work against master but not with current releases (<= 0.3.0).

I will need some time to test/prepare 1.0.0 so you can either build master by yourself (npm install && gulp build) or use 0.3.0 with the old way to set options (via options.deferred). I don't know when I will be able to make 1.0.0 but since the last commit was 8 months ago and there is no feature requests / bug to fix, I will try to release it soon. If you go with the first option (build master), it would help to test the latest code and certainly speed up the release.

[romain-granai]

Hi,

Thanks for the quick answer, what do you mean by old way to set options? Where can I find documentation about that? it's the first time I use ChartJs and the documentation is not very clear (at least for my level) :

    var chart3 = new Chart(ctx3, {
        type: 'doughnut',
        data: {
            labels: chart3labels,
            datasets: [{
                data: chart3percent,
                backgroundColor: chart3color,
                borderColor: 'black',
                circumference: 10,
                borderWidth: 1
            }]
        },
        options: {
            legend: {
                display: false
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        var allData = data.datasets[tooltipItem.datasetIndex].data;
                        var tooltipLabel = data.labels[tooltipItem.index];
                        var tooltipData = allData[tooltipItem.index];
                        var total = 0;
                        for (var i in allData) {
                            total += allData[i];
                        }
                        var tooltipPercentage = Math.round((tooltipData / total) * 100);
                        //return tooltipLabel + ': ' + tooltipData + ' (' + tooltipPercentage + '%)';
                        return tooltipLabel + ': ' + tooltipData + '%';
                    }
                }
            }
        }
    });

    chart3.options.deferred.enabled = true;
    chart3.options.deferred.delay = 10000;

[simonbrunel]

The old way to set options is:

new Chart(ctx, {
    type: 'doughnut',
    // ... your data ...
    options: {
        // ... your other options ...
        deferred: {
            xOffset: 150,
            yOffset: '50%',
            delay: 10000
        }
    }
});

Note that this will not work anymore in 1.0.0 and you would have to use the syntax of your first message. The only difference is that in 1.0.0, options are nested under the plugins property.

[romain-granai]

Thanks for quick feedback Simon,

it's working perfectly now ;)

[simonbrunel]

Just noticed it was almost a duplicate of #5 (I will keep that one open until releasing 1.0.0)

[simonbrunel]

Version 1.0.0 released!

https://chartjs-plugin-deferred.netlify.com/installation