Chartjs-How to use ChartJs in Phaser Game

by

0👍

✅

Thanks to @DerekLawrence comments, the best solution with animation is to use phaser Phaser.GameObjects.DOMElement (link to documentation).

here the demo working:

document.body.style = 'margin:0;';

// Chart Generation Helper function for DEMO
function generateChart(callback){
    let data = {
        // labels: ['Highscore'],
        datasets: [{
            data: [{y: 100, x: '01.01'}, {y: 80, x: '04.01'}, {y: 130, x: '05.01'}, {y: 110, x: '06.01'}, {y: 199, x: '08.01'},],
            backgroundColor: ['#6BFF6B'],
            borderColor: ['#6BFF6B'],
         }],
    };

    const chartConfig = {
        type: 'line',
        data: data,
        options: {
            maintainAspectRatio: false,
            plugins: { legend: { display:false } },
            scales: {
                x: { 
                    title: {display: false},
                    grid: { color: '#6BFF6B' },
                    ticks: { color: '#6BFF6B' },
                },
                y: { 
                    title: {display: false},
                    grid: { color: '#6BFF6B' },
                    ticks: { color: '#6BFF6B' },
                }
            },
            animation: {
                onComplete: () => { 
                    callback(chart.toBase64Image());
                }
            }
        }
 };

    let chart = new Chart(
        document.getElementById('chart'),
        chartConfig
    );
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 190,
    scene: {
        preload,
        create
    }
};

function preload(){
    generateChart();
}

function create () {
    let chart = this.add.dom(10, 10, '#chart-wrapper').setOrigin(0);
   // chart.setInteractive().on('pointerdown', function (){console.info(arguments)})
}

new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>  

    <div id="chart-wrapper" class="chart" style="height:170px; width:350px;">
        <canvas id="chart" ></canvas>
    </div>

<div id="phaser-example"></div>

btw.: I found the reason why the base64 image was not showing up, I failed to wait for the image to load (the event addTexture).

function create(){
    ...

    generateChart(base64Image => {
        this.textures.addBase64('chart', base64Image);
    });
    
    // event triggered after texture is loaded
    this.textures.once('addtexture', function () {
        this.add.image(10, 10, 'chart').setOrigin(0);
    }, this);
}

Leave a comment