Fix radar: legend in two columns and year format

public/js/cuerpos_charts.js

@@ -50,12 +50,13 @@ const makeRadarSeries = (chart, value, category, name, color) => {
     radarSeries.dataFields.categoryX = category;
     radarSeries.strokeWidth = 1.5;
     radarSeries.tooltipText = "{valueY}";
-    radarSeries.name = name;
+    //FIXME: some months are not showing the appropriate name on tooltip on hover
+    radarSeries.name = String(name);
     //radarSeries.connect = false;
     //radarSeries.connectEnds = false;
-    radarSeries.stroke = am4core.color(color); // red
+    radarSeries.stroke = am4core.color(color);
     radarSeries.tooltip.getFillFromObject = false;
-    radarSeries.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
+    radarSeries.tooltipText = "[bold] {name.formatNumber(\"####\")}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
     radarSeries.tooltip.background.fill = am4core.color(color);
 }
 
@@ -83,7 +84,6 @@ const makeLineAxisAndSeries = (chart, field, name, opposite, bullet) => {
     lineSeries.strokeWidth = 2;
     lineSeries.yAxis = lineValueAxis;
     lineSeries.name = name;
-    //series.tooltipText = "{name}: [bold]{valueY.formatNumber('#,###.0')} Ha[/]";
     lineSeries.tooltipText = "[bold]{name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
     lineSeries.tooltipText.fontSize = 10;
     lineSeries.tensionX = 0.8;
@@ -127,7 +127,6 @@ const makeBarSeries = (chart, field, name) => {
     barSeries.dataFields.valueY = field;
     barSeries.dataFields.categoryX = "grupo";
 
-    barSeries.dataFields.categoryX = "grupo"; //"year";
     barSeries.name = name;
     barSeries.columns.template.tooltipText = "[underline][bold]Menor a [bold]{categoryX.formatNumber('#,###.#')} Ha[/]: {valueY.formatNumber('#,###.#')} cuerpos[/]";
     barSeries.columns.template.height = am4core.percent(100);
@@ -193,7 +192,7 @@ const makeRadarChart = (data, months, years) => {
     makeRadarRange(radarCategoryAxis, "enero", "marzo", radarRangeColors[0], 2);
     makeRadarRange(radarCategoryAxis, "marzo", "mayo", radarRangeColors[1], 2);
     makeRadarRange(radarCategoryAxis, "mayo", "septiembre", radarRangeColors[2], 4);
-    makeRadarRange(radarCategoryAxis,     "septiembre", "diciembre", radarRangeColors[3], 3);
+    makeRadarRange(radarCategoryAxis, "septiembre", "diciembre", radarRangeColors[3], 3);
     makeRadarRange(radarCategoryAxis, "diciembre", "diciembre", radarRangeColors[0], 1);
 
     radarChart.cursor = new am4charts.RadarCursor(); //FIXME: cursors are offset
@@ -201,7 +200,6 @@ const makeRadarChart = (data, months, years) => {
     // add line legend
     radarChart.legend = new am4charts.Legend();
     radarChart.legend.fontSize = 10;
-    //radarChart.legend.fontSize = 9;
     radarChart.legend.labels.template.fill = am4core.color(mainTextColor);
     radarChart.legend.itemContainers.template.paddingTop = 0;
     radarChart.legend.itemContainers.template.paddingBottom = 0;
@@ -217,13 +215,12 @@ const makeRadarChart = (data, months, years) => {
     radarChart.legend.data = legenddata;
     radarChart.legend.fontSize = 10;
     radarChart.legend.labels.template.fill = am4core.color(mainTextColor);
+    radarChart.legend.maxColumns = 2;
+
     let markerTemplate = radarChart.legend.markers.template;
     markerTemplate.width = 20;
     markerTemplate.height = 20;
     radarChart.legend.itemContainers.template.paddingTop = 0;
-    //radarChart.legend.itemContainers.template.paddingRight = -10;
-    //radarChart.legend.itemContainers.template.paddingLeft = -10;
-
 }
 
 const makeLineChart = (data) => {