diff --git a/calc.py b/calc.py
index 8e1f04b..8cdcd09 100644
--- a/calc.py
+++ b/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
diff --git a/templates/index.html b/templates/index.html
index 88828f7..6c5cae6 100644
--- a/templates/index.html
+++ b/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' },
@@ -306,20 +314,20 @@
                     plotBands: plotBands // Alternating background for years 
                 },
                 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 
-                        },
+                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 
+                },
                 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
@@ -332,13 +340,13 @@
                     plotBands: plotBands // Alternating background for years 
                 },
                 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 
-                        },
+                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 
+                },
                 series: [
                     { name: "Savings", data: chartData, marker: { radius: 2 } }
                     ,{ name: "{{COMP['vars']['name']}}", data: compChartData, marker: { radius: 2 } }