Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

150
Vistas
How to set countrySeries fill colors in amcharts5 Maps

I'm currently using amcharts5 for their maps for a project and I'm having issues setting a fill color for specific nations/states.

I'm using the Drill-Down to Countries setup. When you click on a country it zooms in and shows all the sections of that country. I can set a fill color for all of them, however I cannot seem to figure out how to set them to have a different fill color each.

The code that currently sets the fill color is:

worldSeries.mapPolygons.template.events.on('click', (ev) => {
  var dataItem = ev.target.dataItem;
  var data = dataItem.dataContext;
  var zoomAnimation = worldSeries.zoomToDataItem(dataItem);

  Promise.all([
    zoomAnimation.waitForStop(),
    am5.net.load('https://cdn.amcharts.com/lib/5/geodata/json/' + data.map + '.json', chart)
  ]).then((results) => {
    var geodata = am5.JSONParser.parse(results[1].response);
    countrySeries.setAll({
      geoJSON: geodata,
      fill: data.polygonSettings.fill,
      fill: am5.color('#0099cc')
    });

    countrySeries.show();
    worldSeries.hide(100);
    backContainer.show();
  });
});

With this, I was able to color everything #0099cc. I attempted to review the docs on colors for amscharts5 colors but can't seem to get it to do what I want it to do.

I assume that there will need to be some sort of loop that can set each fill color independently but I can't figure out where to put it.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda