Show column cursors for radar, line, and area graphs

public/js/cuerpos_charts.js

@@ -194,11 +194,23 @@ const makeRadarChart = (data, months, years) => {
     makeRadarRange(radarCategoryAxis, "diciembre", "diciembre", radarRangeColors[0], 1);
 
     radarChart.cursor = new am4charts.RadarCursor();
-    radarCategoryAxis.cursorTooltipEnabled = false;
+    radarChart.cursor.fullWidthLineX = true;
+    radarChart.cursor.lineX.strokeWidth = 1;
+    radarChart.cursor.lineX.fill = am4core.color("#8F3985");
+    radarChart.cursor.lineX.fillOpacity = 0.1;
+    radarChart.cursor.xAxis = radarCategoryAxis;
+
+    //radarCategoryAxis.cursorTooltipEnabled = false;
+    //FIXME: some months are not showing the appropriate name on tooltip on hover
+    // in the meantime this is way around to fix cursor columns and not show wrong
+    // month tooltips
+    radarChart.cursor.events.on("cursorpositionchanged", function(ev) {
+        let categoryAxis = ev.target.chart.xAxes.getIndex(0);
+        console.log(categoryAxis.tooltip.opacity)
+        categoryAxis.tooltip.hide();
+    });
     //radarCategoryAxis.startLocation = -0.0000001;
     //radarCategoryAxis.endLocation = 1;
-    //FIXME: some months are not showing the appropriate name on tooltip on hover
-    // in the meantime, cursor tooltip is disabled
 
     // add line legend
     radarChart.legend = new am4charts.Legend();
@@ -256,6 +268,11 @@ const makeLineChart = (data) => {
 
     // Add cursor
     lineChart.cursor = new am4charts.XYCursor();
+    lineChart.cursor.fullWidthLineX = true;
+    lineChart.cursor.lineX.strokeWidth = 1;
+    lineChart.cursor.lineX.fill = am4core.color("#8F3985");
+    lineChart.cursor.lineX.fillOpacity = 0.1;
+    lineChart.cursor.xAxis = lineDateAxis;
     lineChart.scrollbarX = new am4core.Scrollbar();
     lineChart.scrollbarX.minHeight = 1;
     lineChart.scrollbarX.parent = lineChart.bottomAxesContainer;
@@ -278,8 +295,9 @@ const makeAreaChart = (data) => {
     areaDateAxis.renderer.minGridDistance = 50;
     areaDateAxis.fontSize = 10;
     areaDateAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
-    areaDateAxis.startLocation = 0.45;
-    areaDateAxis.endLocation = 0.55;
+    // change following values to change where series start and end in graph
+    //areaDateAxis.startLocation = 0.45;
+    //areaDateAxis.endLocation = 0.55;
     areaDateAxis.baseInterval = {
         timeUnit: "month",
         count: 1
@@ -291,9 +309,9 @@ const makeAreaChart = (data) => {
     areaValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
 
     // Create series
-    let areaSeries1 = makeAreaSeries(areaChart, "permanente", "Agua permanente");
-    let areaSeries2 = makeAreaSeries(areaChart, "temporal", "Áreas temporalmente inundadas");
-    let areaSeries3 = makeAreaSeries(areaChart, "vegetacion", "Suelos húmedos-vegetación acuática");
+    makeAreaSeries(areaChart, "permanente", "Agua permanente");
+    makeAreaSeries(areaChart, "temporal", "Áreas temporalmente inundadas");
+    makeAreaSeries(areaChart, "vegetacion", "Suelos húmedos-vegetación acuática");
 
     // create line ranges
     makeDateRange(areaDateAxis, 0, 2, "#E1DBC8");
@@ -303,7 +321,11 @@ const makeAreaChart = (data) => {
     makeDateRange(areaDateAxis, 11, 1, "#E1DBC8");
 
     areaChart.cursor = new am4charts.XYCursor();
-    //areaChart.cursor.xAxis = areaDateAxis;
+    areaChart.cursor.fullWidthLineX = true;
+    areaChart.cursor.lineX.strokeWidth = 1;
+    areaChart.cursor.lineX.fill = am4core.color("#8F3985");
+    areaChart.cursor.lineX.fillOpacity = 0.1;
+    areaChart.cursor.xAxis = areaDateAxis;
     areaChart.scrollbarX = new am4core.Scrollbar();
     areaChart.scrollbarX.minHeight = 1;
     areaChart.scrollbarX.parent = areaChart.bottomAxesContainer;