Amcharts chart looking good on preview page but not showing up on final webpage - amcharts

Question

I'm kind of a noob, sorry if the answer is obvious but apparently nobody has asked that same question before.
I'm in the process of writing an article and I'm already using several other Amcharts charts in the article webpage (that are working just fine) like piecharts and sorted bar charts. Now, my problem is that my 100% stacked column charts seem to be working just fine on the plug-in preview mode but just never show up on the webpage, leaving a blank space instead.
This is really weird as that problem exists only with this type of charts, while the other ones appear and load just fine.
I've already given specific IDs to all charts and I made sure to give unique names to variables as well so that there are no duplicates that might screw everything up. Really I am clueless as to what the cause of that problem is and I need some help. Thank you in advance to whomever might be willing to assist me.
Here is the code for both 100% stacked column charts:
Chart 1
var chart10 = am4core.create("chartdiv10", am4charts.XYChart);
chart10.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart10.data = [
{
category: "Matériaux utilisés",
value1: 5,
value2: 5,
value3: 5,
value4: 23,
value5: 39,
value6: 28,
value7: 24
},
{
category: "Marque",
value1: 6,
value2: 9,
value3: 5,
value4: 15,
value5: 39,
value6: 36,
value7: 19
},
{
category: "Possibilités de personnalisation",
value1: 19,
value2: 19,
value3: 28,
value4: 24,
value5: 12,
value6: 15,
value7: 12
},
{
category: "Label Swiss Made",
value1: 7,
value2: 9,
value3: 11,
value4: 23,
value5: 23,
value6: 17,
value7: 39
},
{
category: "Possibilités de revente",
value1: 38,
value2: 23,
value3: 16,
value4: 15,
value5: 16,
value6: 10,
value7: 11
},
{
category: "Ecoresponsabilité",
value1: 25,
value2: 20,
value3: 20,
value4: 21,
value5: 19,
value6: 9,
value7: 15
},
{
category: "Certifications officielles",
value1: 8,
value2: 6,
value3: 6,
value4: 16,
value5: 23,
value6: 33,
value7: 37
},
{
category: "Montre neuve",
value1: 13,
value2: 13,
value3: 6,
value4: 14,
value5: 18,
value6: 25,
value7: 40
},
]
chart10.padding(30, 30, 10, 30);
chart10.colors.list = [
am4core.color("#81BEF7"),
am4core.color("#58ACFA"),
am4core.color("#2E9AFE"),
am4core.color("#0080FF"),
am4core.color("#2E64FE"),
am4core.color("#0431B4"),
am4core.color("#0B2161")
];
var categoryAxis10 = chart10.xAxes.push(new am4charts.CategoryAxis());
categoryAxis10.dataFields.category = "category";
categoryAxis10.renderer.grid.template.location = 0;
var valueAxis10 = chart10.yAxes.push(new am4charts.ValueAxis());
valueAxis10.min = 0;
valueAxis10.max = 100;
valueAxis10.strictMinMax = true;
valueAxis10.calculateTotals = true;
valueAxis10.renderer.minWidth = 40;
var series110 = chart10.series.push(new am4charts.ColumnSeries());
series110.columns.template.width = am4core.percent(80);
series110.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series110.name = "1";
series110.dataFields.categoryX = "category";
series110.dataFields.valueY = "value1";
series110.dataFields.valueYShow = "totalPercent";
series110.dataItems.template.locations.categoryX = 0.5;
series110.stacked = true;
series110.tooltip.pointerOrientation = "vertical";
var bullet110 = series110.bullets.push(new am4charts.LabelBullet());
bullet110.interactionsEnabled = false;
bullet110.label.text = "1";
bullet110.label.fill = am4core.color("#ffffff");
bullet110.locationY = 0.5;
var series210 = chart10.series.push(new am4charts.ColumnSeries());
series210.columns.template.width = am4core.percent(80);
series210.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series210.name = "2";
series210.dataFields.categoryX = "category";
series210.dataFields.valueY = "value2";
series210.dataFields.valueYShow = "totalPercent";
series210.dataItems.template.locations.categoryX = 0.5;
series210.stacked = true;
series210.tooltip.pointerOrientation = "vertical";
var bullet210 = series210.bullets.push(new am4charts.LabelBullet());
bullet210.interactionsEnabled = false;
bullet210.label.text = "2";
bullet210.label.fill = am4core.color("#ffffff");
bullet210.locationY = 0.5;
var series310 = chart10.series.push(new am4charts.ColumnSeries());
series310.columns.template.width = am4core.percent(80);
series310.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series310.name = "3";
series310.dataFields.categoryX = "category";
series310.dataFields.valueY = "value3";
series310.dataFields.valueYShow = "totalPercent";
series310.dataItems.template.locations.categoryX = 0.5;
series310.stacked = true;
series310.tooltip.pointerOrientation = "vertical";
var bullet310 = series310.bullets.push(new am4charts.LabelBullet());
bullet310.interactionsEnabled = false;
bullet310.label.text = "3";
bullet310.locationY = 0.5;
bullet310.label.fill = am4core.color("#ffffff");
var series410 = chart10.series.push(new am4charts.ColumnSeries());
series410.columns.template.width = am4core.percent(80);
series410.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series410.name = "4";
series410.dataFields.categoryX = "category";
series410.dataFields.valueY = "value4";
series410.dataFields.valueYShow = "totalPercent";
series410.dataItems.template.locations.categoryX = 0.5;
series410.stacked = true;
series410.tooltip.pointerOrientation = "vertical";
var bullet410 = series410.bullets.push(new am4charts.LabelBullet());
bullet410.interactionsEnabled = false;
bullet410.label.text = "4";
bullet410.label.fill = am4core.color("#ffffff");
bullet410.locationY = 0.5;
var series510 = chart10.series.push(new am4charts.ColumnSeries());
series510.columns.template.width = am4core.percent(80);
series510.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series510.name = "5";
series510.dataFields.categoryX = "category";
series510.dataFields.valueY = "value5";
series510.dataFields.valueYShow = "totalPercent";
series510.dataItems.template.locations.categoryX = 0.5;
series510.stacked = true;
series510.tooltip.pointerOrientation = "vertical";
var bullet510 = series510.bullets.push(new am4charts.LabelBullet());
bullet510.interactionsEnabled = false;
bullet510.label.text = "5";
bullet510.label.fill = am4core.color("#ffffff");
bullet510.locationY = 0.5;
var series610 = chart10.series.push(new am4charts.ColumnSeries());
series610.columns.template.width = am4core.percent(80);
series610.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series610.name = "6";
series610.dataFields.categoryX = "category";
series610.dataFields.valueY = "value6";
series610.dataFields.valueYShow = "totalPercent";
series610.dataItems.template.locations.categoryX = 0.5;
series610.stacked = true;
series610.tooltip.pointerOrientation = "vertical";
var bullet610 = series610.bullets.push(new am4charts.LabelBullet());
bullet610.interactionsEnabled = false;
bullet610.label.text = "6";
bullet610.label.fill = am4core.color("#ffffff");
bullet610.locationY = 0.5;
var series710 = chart10.series.push(new am4charts.ColumnSeries());
series710.columns.template.width = am4core.percent(80);
series710.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series710.name = "7";
series710.dataFields.categoryX = "category";
series710.dataFields.valueY = "value7";
series710.dataFields.valueYShow = "totalPercent";
series710.dataItems.template.locations.categoryX = 0.5;
series710.stacked = true;
series710.tooltip.pointerOrientation = "vertical";
var bullet710 = series710.bullets.push(new am4charts.LabelBullet());
bullet710.interactionsEnabled = false;
bullet710.label.text = "7";
bullet710.label.fill = am4core.color("#ffffff");
bullet710.locationY = 0.5;
categoryAxis10.renderer.labels.template.rotation = 320;
Chart 2
var chart89 = am4core.create("chartdiv89", am4charts.XYChart);
chart89.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart89.data = [
{
category89: "Innovante",
value189: 4,
value289: 9,
value389: 34,
value489: 52,
value589: 33
},
{
category89: "Moderne",
value189: 4,
value289: 15,
value389: 44,
value489: 44,
value589: 25
},
{
category89: "Proche de ses clients",
value189: 10,
value289: 6,
value389: 34,
value489: 41,
value589: 41
},
{
category89: "Fermée/exclusive",
value189: 3,
value289: 8,
value389: 32,
value489: 33,
value589: 56
},
{
category89: "Attrayante professionnellement",
value289: 5,
value389: 15,
value489: 44,
value589: 68
}]
chart89.padding(30, 30, 10, 30);
chart89.colors.list = [
am4core.color("#2E9AFE"),
am4core.color("#0080FF"),
am4core.color("#2E64FE"),
am4core.color("#0431B4"),
am4core.color("#0B2161"),
];
var categoryAxis89 = chart89.xAxes.push(new am4charts.CategoryAxis());
categoryAxis89.dataFields.category = "category89";
categoryAxis89.renderer.grid.template.location = 0;
var valueAxis89 = chart89.yAxes.push(new am4charts.ValueAxis());
valueAxis89.min = 0;
valueAxis89.max = 100;
valueAxis89.strictMinMax = true;
valueAxis89.calculateTotals = true;
valueAxis89.renderer.minWidth = 40;
var series189 = chart89.series.push(new am4charts.ColumnSeries());
series189.columns.template.width = am4core.percent(80);
series189.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series189.name = "1";
series189.dataFields.categoryX = "category89";
series189.dataFields.valueY = "value189";
series189.dataFields.valueYShow = "totalPercent";
series189.dataItems.template.locations.categoryX = 0.5;
series189.stacked = true;
series189.tooltip.pointerOrientation = "vertical";
var bullet189 = series189.bullets.push(new am4charts.LabelBullet());
bullet189.interactionsEnabled = false;
bullet189.label.text = "1";
bullet189.label.fill = am4core.color("#ffffff");
bullet189.locationY = 0.5;
var series289 = chart89.series.push(new am4charts.ColumnSeries());
series289.columns.template.width = am4core.percent(80);
series289.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series289.name = "2";
series289.dataFields.categoryX = "category89";
series289.dataFields.valueY = "value289";
series289.dataFields.valueYShow = "totalPercent";
series289.dataItems.template.locations.categoryX = 0.5;
series289.stacked = true;
series289.tooltip.pointerOrientation = "vertical";
var bullet289 = series289.bullets.push(new am4charts.LabelBullet());
bullet289.interactionsEnabled = false;
bullet289.label.text = "2";
bullet289.label.fill = am4core.color("#ffffff");
bullet289.locationY = 0.5;
var series389 = chart89.series.push(new am4charts.ColumnSeries());
series389.columns.template.width = am4core.percent(80);
series389.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series389.name = "3";
series389.dataFields.categoryX = "category89";
series389.dataFields.valueY = "value389";
series389.dataFields.valueYShow = "totalPercent";
series389.dataItems.template.locations.categoryX = 0.5;
series389.stacked = true;
series389.tooltip.pointerOrientation = "vertical";
var bullet389 = series389.bullets.push(new am4charts.LabelBullet());
bullet389.interactionsEnabled = false;
bullet389.label.text = "3";
bullet389.locationY = 0.5;
bullet389.label.fill = am4core.color("#ffffff");
var series489 = chart89.series.push(new am4charts.ColumnSeries());
series489.columns.template.width = am4core.percent(80);
series489.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series489.name = "4";
series489.dataFields.categoryX = "category89";
series489.dataFields.valueY = "value489";
series489.dataFields.valueYShow = "totalPercent";
series489.dataItems.template.locations.categoryX = 0.5;
series489.stacked = true;
series489.tooltip.pointerOrientation = "vertical";
var bullet489 = series489.bullets.push(new am4charts.LabelBullet());
bullet489.interactionsEnabled = false;
bullet489.label.text = "4";
bullet489.label.fill = am4core.color("#ffffff");
bullet489.locationY = 0.5;
var series589 = chart89.series.push(new am4charts.ColumnSeries());
series589.columns.template.width = am4core.percent(80);
series589.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series589.name = "5";
series589.dataFields.categoryX = "category89";
series589.dataFields.valueY = "value589";
series589.dataFields.valueYShow = "totalPercent";
series589.dataItems.template.locations.categoryX = 0.5;
series589.stacked = true;
series589.tooltip.pointerOrientation = "vertical";
var bullet589 = series589.bullets.push(new am4charts.LabelBullet());
bullet589.interactionsEnabled = false;
bullet589.label.text = "5";
Also, an important note: I tried using only one at a time on the webpage and this still gave no different result. So probably not a duplicated variable I guess.

Answer 1

Problem solved. It was due to the particular design I copied/paste from somewhere else and gave to the divi textbox containing the charts.