I’ve a situation with a dashboard page where I’m using AmCharts 4 Map Chart in two different tabs.
When I render each of them by the first time, both get labels with the size I’ve defined, but when I open any of them for the second time and on, the labels get giant and makes the map unreadable.
I can’t share the customer code, but I tried to provide a code pen with a similar behavior here
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
mapData = [{
id: 'US-AL',
value: 40223504
},
{
id: 'US-AK',
value: 30345487
},
{
id: 'US-AZ',
value: 22359251
},
{
id: 'US-AR',
value: 20448194
},
{
id: 'US-CA',
value: 13092796
},
{
id: 'US-CZ',
value: 12807072
},
{
id: 'US-CO',
value: 11878330
},
{
id: 'US-CT',
value: 11019186
},
{
id: 'US-DE',
value: 10710558
},
{
id: 'US-DC',
value: 10135438
},
{
id: 'US-FL',
value: 9438124
},
{
id: 'US-GA',
value: 8820504
},
{
id: 'US-GU',
value: 7999503
},
{
id: 'US-HI',
value: 7379346
},
{
id: 'US-ID',
value: 7174604
},
{
id: 'US-IL',
value: 7080262
},
{
id: 'US-IN',
value: 6876047
},
{
id: 'US-IA',
value: 6298325
},
{
id: 'US-KS',
value: 6204710
},
{
id: 'US-KY',
value: 5997070
},
{
id: 'US-LA',
value: 5955737
},
{
id: 'US-ME',
value: 5827265
},
{
id: 'US-MD',
value: 5266343
},
{
id: 'US-MA',
value: 5097641
},
{
id: 'US-MI',
value: 4695071
},
{
id: 'US-MN',
value: 4555777
},
{
id: 'US-MS',
value: 4359110
},
{
id: 'US-MO',
value: 4021753
},
{
id: 'US-MT',
value: 3615499
},
{
id: 'US-NE',
value: 3423935
},
{
id: 'US-NV',
value: 3233572
},
{
id: 'US-NH',
value: 3225832
},
{
id: 'US-NJ',
value: 3040207
},
{
id: 'US-NM',
value: 2963308
},
{
id: 'US-NY',
value: 2959473
},
{
id: 'US-NC',
value: 2135024
},
{
id: 'US-ND',
value: 2002052
},
{
id: 'US-OH',
value: 1920562
},
{
id: 'US-OK',
value: 1775932
},
{
id: 'US-OR',
value: 1483762
},
{
id: 'US-PA',
value: 1395847
},
{
id: 'US-PR',
value: 1372559
},
{
id: 'US-RI',
value: 1112668
},
{
id: 'US-SC',
value: 1110822
},
{
id: 'US-SD',
value: 1017551
},
{
id: 'US-TN',
value: 908414
},
{
id: 'US-TX',
value: 811044
},
{
id: 'US-UT',
value: 740339
},
{
id: 'US-VT',
value: 648279
},
{
id: 'US-VI',
value: 580817
},
{
id: 'US-VA',
value: 740339
},
{
id: 'US-WA',
value: 740339
},
{
id: 'US-WV',
value: 740339
},
{
id: 'US-WI',
value: 740339
},
{
id: 'US-WY',
value: 740339
}
];
//MAP 1
// Create map instance
var chart = am4core.create("chartdiv1", am4maps.MapChart);
// Set map definition
chart.geodata = am4geodata_usaHigh;
// Set projection
chart.projection = new am4maps.projections.AlbersUsa();
// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
// Make map load polygon (like country names) data from GeoJSON
polygonSeries.useGeodata = true;
polygonSeries.calculateVisualCenter = true;
// Add some data
polygonSeries.data = mapData;
// Configure series
var polygonTemplate = polygonSeries.mapPolygons.template;
console.log('pt', polygonTemplate);
polygonTemplate.tooltipText = "{name} : {value}";
polygonTemplate.fill = am4core.color("#74B266");
// Create hover state and set alternative fill color
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");
var labelSeries = chart.series.push(new am4maps.MapImageSeries());
var labelTemplate = labelSeries.mapImages.template.createChild(am4core.Label);
labelTemplate.horizontalCenter = 'middle';
labelTemplate.verticalCenter = 'middle';
labelTemplate.fontSize = 10;
labelTemplate.interactionsEnabled = false;
labelTemplate.nonScaling = false;
polygonSeries.events.on('inited', () => {
for (var i = 0; i < mapData.length; i++) {
const itemId = mapData[i]['id'].toString();
var polygon = polygonSeries.getPolygonById(itemId);
if (polygon) {
var label = labelSeries.mapImages.create();
var state = itemId.split('-').pop();
label.longitude = polygon.visualLongitude;
label.latitude = polygon.visualLatitude;
label.children.getIndex(0).text = `${mapData[i].value} n ${state}`;
}
}
})
// MAP 1 END
//MAP 2
// create second map instance
var chart2 = am4core.create('chartdiv2', am4maps.MapChart);
chart2.geodata = am4geodata_usaHigh;
// Set projection
chart2.projection = new am4maps.projections.AlbersUsa();
// Create map polygon series
var polygonSeries2 = chart2.series.push(new am4maps.MapPolygonSeries());
// Make map load polygon (like country names) data from GeoJSON
polygonSeries2.useGeodata = true;
polygonSeries2.calculateVisualCenter = true;
// Add some data
polygonSeries2.data = mapData;
// Configure series
var polygonTemplate2 = polygonSeries2.mapPolygons.template;
console.log('pt', polygonTemplate2);
polygonTemplate2.tooltipText = "{name} : {value}";
polygonTemplate2.fill = am4core.color("#6495ED");
// Create hover state and set alternative fill color
var hs = polygonTemplate2.states.create("hover");
hs.properties.fill = am4core.color("#0000FF");
var labelSeries2 = chart2.series.push(new am4maps.MapImageSeries());
var labelTemplate2 = labelSeries2.mapImages.template.createChild(am4core.Label);
labelTemplate2.horizontalCenter = 'middle';
labelTemplate2.verticalCenter = 'middle';
labelTemplate2.fontSize = 10;
labelTemplate2.interactionsEnabled = false;
labelTemplate2.nonScaling = false;
polygonSeries2.events.on('inited', () => {
for (var i = 0; i < mapData.length; i++) {
const itemId = mapData[i]['id'].toString();
var polygon = polygonSeries2.getPolygonById(itemId);
if (polygon) {
var label = labelSeries2.mapImages.create();
var state = itemId.split('-').pop();
label.longitude = polygon.visualLongitude;
label.latitude = polygon.visualLatitude;
label.children.getIndex(0).text = `${mapData[i].value} n ${state}`;
}
}
})
//MAP 2 END:root {
--theme-yellow: #FEE715FF;
--theme-black: #101820FF;
--theme-gray: #8892B0;
}
body {
background-color: var(--theme-black);
}
/* SECTION VERTICAL TABS */
#experienceTab.nav-pills .nav-link.active {
color: var(--theme-yellow) !important;
background-color: transparent;
border-radius: 0px;
border-left: 3px solid var(--theme-yellow);
}
#experienceTab.nav-pills .nav-link {
border-radius: 0px;
border-left: 2px solid var(--theme-gray);
}
.date-range {
letter-spacing: 0.01em;
color: var(--theme-gray);
}
/* STUB LINKS */
a {
color: var(--theme-gray);
transition: 0.3s eas-in-out;
}
a:hover {
color: var(--theme-yellow);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - amcharts 4 scale label</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.13.0/css/mdb.min.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="row p-5">
<div class="col-md-2 mb-3">
<ul class="nav nav-pills flex-column" id="experienceTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#snit" role="tab" aria-controls="home" aria-selected="true">Map 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#devs" role="tab" aria-controls="profile" aria-selected="false">Map 2</a>
</li>
</ul>
</div>
<!-- /.col-md-4 -->
<div class="col-md-10">
<div class="tab-content" id="experienceTabContent">
<div class="tab-pane fade show active text-left text-light" id="snit" role="tabpanel" aria-labelledby="home-tab">
<h3>Map 1</h3>
<div class='chartdiv1'></div>
</div>
<div class="tab-pane fade text-left text-light" id="devs" role="tabpanel" aria-labelledby="profile-tab">
<h3>Map 2</h3>
<div class='chartdiv2'></div>
</div>
</div>
<!--tab content end-->
</div>
<!-- col-md-8 end -->
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.13.0/js/mdb.min.js'></script>
<script src='https://cdn.amcharts.com/lib/4/core.js'></script>
<script src='https://cdn.amcharts.com/lib/4/maps.js'></script>
<script src='https://cdn.amcharts.com/lib/4/geodata/usaHigh.js'></script>
<script src="./script.js"></script>
</body>
</html>Any help would be really appreciated.