Fix font sizes, title margins and tooltip text formats

public/js/centropais_periurbano_charts.js

@@ -74,7 +74,8 @@ am4core.ready(function() {
 */
     let stackedBarTitle = stackedBarChart.titles.create();
     stackedBarTitle.text = "Grado de urbanización en la RU-CMCP (número de pixeles)";
-    stackedBarTitle.fontSize = 9;
+    stackedBarTitle.fontSize = 15;
+    stackedBarTitle.marginBottom = 10;
     stackedBarTitle.fill = am4core.color(mainTextColor);
 
     stackedBarChart.data = [
@@ -116,14 +117,14 @@ am4core.ready(function() {
         }
     ];
     stackedBarChart.legend = new am4charts.Legend();
-    stackedBarChart.legend.fontSize = 10;
+    stackedBarChart.legend.fontSize = 15;
     stackedBarChart.legend.labels.template.fill = am4core.color(mainTextColor);
 
     let stackedBarCategoryAxis = stackedBarChart.xAxes.push(new am4charts.CategoryAxis());
     stackedBarCategoryAxis.dataFields.category = "category";
     stackedBarCategoryAxis.renderer.grid.template.location = 0;
     stackedBarCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
-    stackedBarCategoryAxis.renderer.labels.template.fontSize = 11;
+    stackedBarCategoryAxis.renderer.labels.template.fontSize = 15;
 
     let stackedBarValueAxis = stackedBarChart.yAxes.push(new am4charts.ValueAxis());
     stackedBarValueAxis.min = 0;
@@ -132,7 +133,7 @@ am4core.ready(function() {
     stackedBarValueAxis.calculateTotals = true;
     stackedBarValueAxis.renderer.minWidth = 50;
     stackedBarValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
-    stackedBarValueAxis.renderer.labels.template.fontSize = 9;
+    stackedBarValueAxis.renderer.labels.template.fontSize = 15;
 
     makeStackedBarSeries(stackedBarChart, "Bajo", "category", "value1", "#61ac65");
     makeStackedBarSeries(stackedBarChart, "Medio", "category", "value2", "#fcfccc");
@@ -151,7 +152,8 @@ am4core.ready(function() {
 */
     let stackedBarLineTitle = stackedBarLineChart.titles.create();
     stackedBarLineTitle.text = "Evolución del grado de urbanización en el periurbano del \n Corredor del Bajío en extensión y proporción";
-    stackedBarLineTitle.fontSize = 9;
+    stackedBarLineTitle.fontSize = 15;
+    stackedBarLineTitle.marginBottom = 10;
     stackedBarLineTitle.fill = am4core.color(mainTextColor);
 
     stackedBarLineChart.data = [
@@ -194,14 +196,14 @@ am4core.ready(function() {
     ];
 
     stackedBarLineChart.legend = new am4charts.Legend();
-    stackedBarLineChart.legend.fontSize = 10;
+    stackedBarLineChart.legend.fontSize = 15;
     stackedBarLineChart.legend.labels.template.fill = am4core.color(mainTextColor);
 
     let stackedBarLineCategoryAxis = stackedBarLineChart.xAxes.push(new am4charts.CategoryAxis());
     stackedBarLineCategoryAxis.dataFields.category = "category";
     stackedBarLineCategoryAxis.renderer.grid.template.location = 0;
     stackedBarLineCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
-    stackedBarLineCategoryAxis.renderer.labels.template.fontSize = 11;
+    stackedBarLineCategoryAxis.renderer.labels.template.fontSize = 15;
 
     let stackedBarLineValueAxis = stackedBarLineChart.yAxes.push(new am4charts.ValueAxis());
     stackedBarLineValueAxis.min = 0;
@@ -210,7 +212,7 @@ am4core.ready(function() {
     stackedBarLineValueAxis.calculateTotals = true;
     stackedBarLineValueAxis.renderer.minWidth = 50;
     stackedBarLineValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
-    stackedBarLineValueAxis.renderer.labels.template.fontSize = 9;
+    stackedBarLineValueAxis.renderer.labels.template.fontSize = 15;
 
     /* Create secondary value axis */
     let stackedBarLinePercentAxis = stackedBarLineChart.yAxes.push(new am4charts.ValueAxis());
@@ -224,7 +226,7 @@ am4core.ready(function() {
     stackedBarLinePercentAxis.numberFormatter.numberFormat = "#'%'";
     stackedBarLinePercentAxis.cursorTooltipEnabled = false;
     stackedBarLinePercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
-    stackedBarLinePercentAxis.renderer.labels.template.fontSize = 9;
+    stackedBarLinePercentAxis.renderer.labels.template.fontSize = 15;
 
     makeStackedBarSeries(stackedBarLineChart, "Bajo", "category", "value1", "#f8caa0");
     makeStackedBarSeries(stackedBarLineChart, "Medio", "category", "value2", "#cf8a4f");
@@ -254,7 +256,8 @@ am4core.ready(function() {
 
     let lineTitle = lineChart.titles.create();
     lineTitle.text = "Crecimiento del medio construido en 6 tramos del Corredor del Bajío";
-    lineTitle.fontSize = 9;
+    lineTitle.fontSize = 14;
+    lineTitle.marginBottom = 15;
     lineTitle.fill = am4core.color(mainTextColor);
 
     lineChart.data = [
@@ -316,14 +319,14 @@ am4core.ready(function() {
     ];
 
     lineChart.legend = new am4charts.Legend();
-    lineChart.legend.fontSize = 10;
+    lineChart.legend.fontSize = 15;
     lineChart.legend.labels.template.fill = am4core.color(mainTextColor);
 
     let lineChartCategoryAxis = lineChart.xAxes.push(new am4charts.CategoryAxis());
     lineChartCategoryAxis.dataFields.category = "category";
     lineChartCategoryAxis.renderer.grid.template.location = 0;
     lineChartCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
-    lineChartCategoryAxis.renderer.labels.template.fontSize = 11;
+    lineChartCategoryAxis.renderer.labels.template.fontSize = 15;
 
     let lineChartValueAxis = lineChart.yAxes.push(new am4charts.ValueAxis());
     lineChartValueAxis.min = 0;
@@ -332,7 +335,7 @@ am4core.ready(function() {
     lineChartValueAxis.calculateTotals = true;
     lineChartValueAxis.renderer.minWidth = 50;
     lineChartValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
-    lineChartValueAxis.renderer.labels.template.fontSize = 9;
+    lineChartValueAxis.renderer.labels.template.fontSize = 15;
 
     makeLineSeries(lineChart, "T7", "Tramo7", false, "category", lineChartValueAxis, "#fddfb9");
     makeLineSeries(lineChart, "T8", "Tramo8", false, "category", lineChartValueAxis, "#fb9a99");
@@ -354,7 +357,8 @@ am4core.ready(function() {
 
     let barPercentChartTitle = barPercentChart.titles.create();
     barPercentChartTitle.text = "Cobertura del medio construido en los tramos del Corredor del Bajío";
-    barPercentChartTitle.fontSize = 9;
+    barPercentChartTitle.fontSize = 14;
+    barPercentChartTitle.marginBottom = 15;
     barPercentChartTitle.fill = am4core.color(mainTextColor);
 
     let table = "periurbanoBajio";
@@ -367,12 +371,12 @@ am4core.ready(function() {
     // FIXME: axis labels are too big
     barPercentCategoryAxis.renderer.minGridDistance = 30;
     barPercentCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
-    barPercentCategoryAxis.renderer.labels.template.fontSize = 9;
+    barPercentCategoryAxis.renderer.labels.template.fontSize = 15;
 
     /* Create primary value axis */
     let barPercentValueAxis = barPercentChart.yAxes.push(new am4charts.ValueAxis());
     barPercentValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
-    barPercentValueAxis.renderer.labels.template.fontSize = 9;
+    barPercentValueAxis.renderer.labels.template.fontSize = 15;
 
     /* Create secondary value axis */
     let barPercentAxis = barPercentChart.yAxes.push(new am4charts.ValueAxis());
@@ -385,7 +389,7 @@ am4core.ready(function() {
     barPercentAxis.numberFormatter.numberFormat = "#'%'";
     barPercentAxis.cursorTooltipEnabled = false;
     barPercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
-    barPercentAxis.renderer.labels.template.fontSize = 9;
+    barPercentAxis.renderer.labels.template.fontSize = 15;
 
     /* Create series */
     let barPercentColumnSeries = barPercentChart.series.push(new am4charts.ColumnSeries());
@@ -393,7 +397,7 @@ am4core.ready(function() {
     barPercentColumnSeries.dataFields.valueY = "has";
     barPercentColumnSeries.dataFields.categoryX = "region";
 
-    barPercentColumnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} \n en {categoryX}:\n[/][#fff font-size: 20px]{valueY} Ha[/] [#fff]{additional}[/]";
+    barPercentColumnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} \n en {categoryX}:\n[/][#fff font-size: 20px]{valueY.formatNumber('#.00')} Ha[/] [#fff]{additional}[/]";
     barPercentColumnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
     barPercentColumnSeries.columns.template.propertyFields.stroke = "stroke";
     barPercentColumnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
@@ -415,7 +419,7 @@ am4core.ready(function() {
 
     let barPercentBullet = barPercentLineSeries.bullets.push(new am4charts.Bullet());
     barPercentBullet.fill = am4core.color("#c41e3a"); // tooltips grab fill from parent by default
-    barPercentBullet.tooltipText = "[#fff font-size: 15px]{name}\n en {categoryX}:\n[/][#fff font-size: 20px]{valueY} %[/] [#fff]{additional}[/]";
+    barPercentBullet.tooltipText = "[#fff font-size: 15px]{name}\n en {categoryX}:\n[/][#fff font-size: 20px]{valueY.formatNumber('#.00')} %[/] [#fff]{additional}[/]";
 
     let barPercentCircle = barPercentBullet.createChild(am4core.Circle);
     barPercentCircle.radius = 4;