Support

Account

Home Forums Gutenberg JavaScript Based Gutenberg Block

Unread

JavaScript Based Gutenberg Block

  • 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

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.