Multiple amCharts 4 in firefox - amcharts

Question

I try to load multiple amcharts charts on one page. The charts work perfectly with both Chrome and Edge. Firefox shows only the first graph and not the other graphs. Hopefully someone can show me how I can solve this problem.
previously question does not have a visible solution
In this example I have made 2 amcharts graphs. If I open this example in Chrome or Edge then all graphs works but not in Firefox. Hopefully with the help of this example you can find out what the problem is.
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var gantt = am4core.create("gantt", am4charts.XYChart);
gantt.hiddenState.properties.opacity = 0; // this creates initial fade-in
gantt.paddingRight = 30;
gantt.dateFormatter.inputDateFormat = "dd.MM.yyyy";
var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.4;
gantt.data = [
{
category: 'First',
fromDate: '01.01.2022',
toDate: '01.03.2022',
fromDateReal: '01.02.2022',
toDateReal: '01.04.2022',
colorPlan: colorSet.getIndex(0).brighten(0),
colorReal: colorSet.getIndex(8).brighten(0)
},
{
category: 'Second',
fromDate: '01.02.2022',
toDate: '01.05.2022',
fromDateReal: '01.01.2022',
toDateReal: '01.06.2022',
colorPlan: colorSet.getIndex(0).brighten(0),
colorReal: colorSet.getIndex(8).brighten(0)
}
]
var categoryAxisGantt = gantt.yAxes.push(new am4charts.CategoryAxis());
categoryAxisGantt.dataFields.category = "category";
categoryAxisGantt.renderer.grid.template.location = 0;
categoryAxisGantt.renderer.inversed = true;
var yLabelGantt = categoryAxisGantt.renderer.labels.template;
yLabelGantt.wrap = true;
yLabelGantt.maxWidth = 200;
var dateAxisGantt = gantt.xAxes.push(new am4charts.DateAxis());
dateAxisGantt.dateFormatter.dateFormat = "dd.MM.yyyy";
dateAxisGantt.renderer.minGridDistance = 70;
dateAxisGantt.min = (new Date(2022, 01, 01)).getTime();
dateAxisGantt.strictMinMax = true;
dateAxisGantt.renderer.tooltipLocation = 0;
var rangeGantt = dateAxisGantt.axisRanges.create();
rangeGantt.date = new Date();
rangeGantt.grid.stroke = am4core.color("red");
rangeGantt.grid.strokeWidth = 2;
rangeGantt.grid.strokeOpacity = 1;
function createGanttSeries(start, end, category, name, color){
var series1Gantt = gantt.series.push(new am4charts.ColumnSeries());
series1Gantt.columns.template.width = am4core.percent(80);
series1Gantt.columns.template.tooltipText = "{name}\n{category}: {openDateX} - {dateX}";
series1Gantt.dataFields.openDateX = start;
series1Gantt.dataFields.dateX = end;
series1Gantt.dataFields.categoryY = category;
series1Gantt.name = name
series1Gantt.columns.template.propertyFields.fill = color; // get color from data
series1Gantt.columns.template.propertyFields.stroke = color;
series1Gantt.columns.template.strokeOpacity = 1;
}
//план
createGanttSeries("fromDate", "toDate", "category", "План", "colorPlan");
//факт
createGanttSeries("fromDateReal", "toDateReal", "category", "Факт", "colorReal");
gantt.scrollbarX = new am4core.Scrollbar();
// Create chart instance
var chart = am4core.create("dds", am4charts.XYChart);
let title = chart.titles.create();
title.text = "ДДС";
title.fontSize = 25;
title.marginBottom = 30;
// Export
chart.exporting.menu = new am4core.ExportMenu();
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormatter = new am4core.DateFormatter();
chart.dateFormatter.dateFormat = "MMMM yy";
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.name = "ДДС (план)";
columnSeries.dataFields.valueY = "val";
columnSeries.dataFields.dateX = "date";
columnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} {dateX}:\n[/][#fff font-size: 20px]{valueY}[/] [#fff]{additional}[/]"
columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
columnSeries.columns.template.propertyFields.stroke = "stroke";
columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
columnSeries.tooltip.label.textAlign = "middle";
chart.data = [
{
"date": "06.10.2022",
"val": 143566570.46,
"total": 143566570.46
},
{
"date": "09.25.2022",
"val": 35891642.62,
"total": 179458213.08
}
];
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#gantt {
width: 100%;
height: 500px;
}
#dds {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="gantt"></div>
<div id="dds"></div>

Answer 1

You're missing an inputDateFormat for your second chart.
chart.dateFormatter.inputDateFormat = "MM.dd.yyyy";
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var gantt = am4core.create("gantt", am4charts.XYChart);
gantt.hiddenState.properties.opacity = 0; // this creates initial fade-in
gantt.paddingRight = 30;
gantt.dateFormatter.inputDateFormat = "dd.MM.yyyy";
var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.4;
gantt.data = [
{
category: 'First',
fromDate: '01.01.2022',
toDate: '01.03.2022',
fromDateReal: '01.02.2022',
toDateReal: '01.04.2022',
colorPlan: colorSet.getIndex(0).brighten(0),
colorReal: colorSet.getIndex(8).brighten(0)
},
{
category: 'Second',
fromDate: '01.02.2022',
toDate: '01.05.2022',
fromDateReal: '01.01.2022',
toDateReal: '01.06.2022',
colorPlan: colorSet.getIndex(0).brighten(0),
colorReal: colorSet.getIndex(8).brighten(0)
}
]
var categoryAxisGantt = gantt.yAxes.push(new am4charts.CategoryAxis());
categoryAxisGantt.dataFields.category = "category";
categoryAxisGantt.renderer.grid.template.location = 0;
categoryAxisGantt.renderer.inversed = true;
var yLabelGantt = categoryAxisGantt.renderer.labels.template;
yLabelGantt.wrap = true;
yLabelGantt.maxWidth = 200;
var dateAxisGantt = gantt.xAxes.push(new am4charts.DateAxis());
dateAxisGantt.dateFormatter.dateFormat = "dd.MM.yyyy";
dateAxisGantt.renderer.minGridDistance = 70;
dateAxisGantt.min = (new Date(2022, 01, 01)).getTime();
dateAxisGantt.strictMinMax = true;
dateAxisGantt.renderer.tooltipLocation = 0;
var rangeGantt = dateAxisGantt.axisRanges.create();
rangeGantt.date = new Date();
rangeGantt.grid.stroke = am4core.color("red");
rangeGantt.grid.strokeWidth = 2;
rangeGantt.grid.strokeOpacity = 1;
function createGanttSeries(start, end, category, name, color){
var series1Gantt = gantt.series.push(new am4charts.ColumnSeries());
series1Gantt.columns.template.width = am4core.percent(80);
series1Gantt.columns.template.tooltipText = "{name}\n{category}: {openDateX} - {dateX}";
series1Gantt.dataFields.openDateX = start;
series1Gantt.dataFields.dateX = end;
series1Gantt.dataFields.categoryY = category;
series1Gantt.name = name
series1Gantt.columns.template.propertyFields.fill = color; // get color from data
series1Gantt.columns.template.propertyFields.stroke = color;
series1Gantt.columns.template.strokeOpacity = 1;
}
//план
createGanttSeries("fromDate", "toDate", "category", "План", "colorPlan");
//факт
createGanttSeries("fromDateReal", "toDateReal", "category", "Факт", "colorReal");
gantt.scrollbarX = new am4core.Scrollbar();
// Create chart instance
var chart = am4core.create("dds", am4charts.XYChart);
let title = chart.titles.create();
title.text = "ДДС";
title.fontSize = 25;
title.marginBottom = 30;
// Export
chart.exporting.menu = new am4core.ExportMenu();
chart.dateFormatter.inputDateFormat = "MM.dd.yyyy";
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormatter = new am4core.DateFormatter();
chart.dateFormatter.dateFormat = "MMMM yy";
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.name = "ДДС (план)";
columnSeries.dataFields.valueY = "val";
columnSeries.dataFields.dateX = "date";
columnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} {dateX}:\n[/][#fff font-size: 20px]{valueY}[/] [#fff]{additional}[/]"
columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
columnSeries.columns.template.propertyFields.stroke = "stroke";
columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
columnSeries.tooltip.label.textAlign = "middle";
chart.data = [
{
"date": "06.10.2022",
"val": 143566570.46,
"total": 143566570.46
},
{
"date": "09.25.2022",
"val": 35891642.62,
"total": 179458213.08
}
];
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#gantt {
width: 100%;
height: 500px;
}
#dds {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="gantt"></div>
<div id="dds"></div>