make payment annotations show as negatives, use this to make annotations of adding go above graph, and generally payment annotaions below the line. Then switch to have the last few annoations above the graph regardless as we run out of room at that end of the graph

calc.py

@@ -25,7 +25,7 @@ def bill_amount_today(finance, day, bill_data, bt_id_name, total ):
             if b['amount'] > 1000:
                 n=bt_id_name[ b['bill_type'] ]
                 print( f"bill_amt_today {n} for {day_str} has amt={amt}" )
-                add_annotation(finance, day, total-amt, amt, f"Pay {n}" )
+                add_annotation(finance, day, total-amt, -amt, f"Pay {n}" )
         # bills are desc order so if the bill is before the day we are after then stop looking
         if b['bill_date'] < day_str:
             return amt

templates/index.html

@@ -187,10 +187,10 @@
     </form>
 
     <div id="tab-graph" class="tab-pane">
-      <div class="row mt-4 highcharts-dark" id="container" style="width:100%; height:800px;"></div>
+      <div class="row mt-4 highcharts-dark" id="graph" style="width:100%; height:800px;"></div>
     </div>
     <div id="tab-compgraph" class="tab-pane">
-      <div class="row mt-4 highcharts-dark" id="container-comp" style="width:100%; height:800px;"></div>
+      <div class="row mt-4 highcharts-dark" id="graph-comp" style="width:100%; height:800px;"></div>
     </div>
  </div>
     <script type="text/javascript">
@@ -272,8 +272,8 @@
             });
 
             const annotations = [];
-            // the al, x, offset are used to make the alternate annotations be on slightly different vertical offsets (size is based on $'s)
-            // al alternates every 2 annotations left / right (so 2 left, then 2 right), x is just used to also move the label more left/right to get the connecting line
+            // offset is used to make the next annotation be on slightly different vertical offsets (size is based on $'s)
+            // HACK: start at 13, later we adjust in steps of 50s allowing 4 steps, then we go back to top
             var offset=13
             // Add annotations for changes greater than 5000
             {% for a in finance['annotations'] %}
@@ -287,16 +287,24 @@
                             yAxis: 0
                         },
                         x: -70,
-                        y: offset,
+                        {% if '-$' in a['label'] %}
+                            y: offset,
+                        {% else %}
+                            y: -20,
+                        {% endif %}
                         text: '{{a['label']}}'
                     }], labelOptions: { allowOverlap: true }
                 });
-                offset = ({{loop.index}} * 50 % 200) +50
+                {% if a['y'] > 200000 %}
+                    offset = ({{loop.index}} * 50 % 200) +50
+                {% else %}
+                    offset = -100
+                {% endif %}
             {% endfor %}
             document.keep = annotations
 
             // Highcharts configuration
-            Highcharts.chart('container', {
+            Highcharts.chart('graph', {
                 chart: { type: 'line' },
                 colors: [ 'orange' ],
                 title: { text: 'Savings Over Time' },
@@ -307,19 +315,19 @@
                 },
                 yAxis: { title: { text: 'Amount ($)' } },
                 tooltip: {
-                            pointFormatter: function () 
-                            { 
-                                if( this.series.symbol == 'circle' ) { s='\u25CF' } else { s='\u2B25' }
-                                return '<span style="color:' + this.point.color + '">' + s + '</span> <b>' + this.point.y + ':</b> ' + this.series.name + '<br>'
-                            }, shared:true 
-                        },
+                    pointFormatter: function () 
+                    {
+                        if( this.series.symbol == 'circle' ) { s='\u25CF' } else { s='\u2B25' }
+                        return '<span style="color:' + this.point.color + '">' + s + '</span> <b>' + this.point.y + ':</b> ' + this.series.name + '<br>'
+                    }, shared:true 
+                },
                 annotations: annotations, // Add annotations
                 series: [ { name: "Savings", data: chartData, marker: { radius: 2 } } ]
             });
 
             {% if COMP %}
             // Highcharts configuration
-            Highcharts.chart('container-comp', {
+            Highcharts.chart('graph-comp', {
                 chart: { type: 'line' },
                 colors: [
                     'orange', // Custom color 1
@@ -333,12 +341,12 @@
                 },
                 yAxis: { title: { text: 'Amount ($)' } },
                 tooltip: {
-                            pointFormatter: function () 
-                            { 
-                                if( this.series.symbol == 'circle' ) { s='\u25CF' } else { s='\u2B25' }
-                                return '<span style="color:' + this.point.color + '">' + s + '</span> <b>' + this.point.y + ':</b> ' + this.series.name + '<br>'
-                            }, shared:true 
-                        },
+                    pointFormatter: function () 
+                    {
+                        if( this.series.symbol == 'circle' ) { s='\u25CF' } else { s='\u2B25' }
+                        return '<span style="color:' + this.point.color + '">' + s + '</span> <b>' + this.point.y + ':</b> ' + this.series.name + '<br>'
+                    }, shared:true 
+                },
                 series: [
                     { name: "Savings", data: chartData, marker: { radius: 2 } }
                     ,{ name: "{{COMP['vars']['name']}}", data: compChartData, marker: { radius: 2 } }