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