JavaScript Based Gutenberg Block

• azizultex

• August 17, 2021 at 11:34 am

Hello there,
I was developing the Gutenberg block using ACF, but got stuck on a point when the block I’m going to create is a Chart based on JavaScript. Each block should have a self initialization script ( check id myChart in the JS below ) and a page may have more than one block.

HTML Markup:

<div class="width-fix"><canvas id="myChart"></canvas></div>

Javascript:

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
    type: "bar",
    plugins: [ChartDataLabels],
    data: {
        labels: [
            "Caterpillar Men's Pelton Industrial & Construction Shoe",
            "Martens Unisex 2976 Slip-Resistant Service Boots",
            "Wolverine Men’s Floorhand Waterproof 10-Inch Soft Toe Work Boot",
            "Caterpillar Men’s Excavator XL Pull-On Construction Boot",
            "Ariat Men’s Groundbreaker Pull-On Work Boot",
            "Caterpillar Men’s Pelton Industrial & Construction Shoe",
            "Martens Unisex 2976 Slip-Resistant Service Boots",
            "Wolverine Men’s Floorhand Waterproof 10-Inch Soft Toe Work Boot",
            "Caterpillar Men’s Excavator XL Pull-On Construction Boot",
        ],
        datasets: [ ...

Question is, how I can initialize each of the charts added on a page that depends on Javascript?

Thanks