diff --git a/frontend/strategy.html b/frontend/strategy.html index 520fb3b..3de3dc2 100644 --- a/frontend/strategy.html +++ b/frontend/strategy.html @@ -581,11 +581,16 @@ } } + const labelPad = { left: 6, right: 6, top: 3, bottom: 3 }; const xAnnos = [{ x: spot, borderColor: '#ffd43b', strokeDashArray: 4, - label: { text: 'Spot $'+spot.toFixed(2), borderColor:'#ffd43b', style:{ color:'#1a1c2e', background:'#ffd43b', fontSize:'11px' }, position:'top' } - }].concat(bes.map(x => ({ x, borderColor:'#ffd43b66', strokeDashArray:2, - label:{ text:'BE $'+x.toFixed(2), borderColor:'transparent', style:{ color:'#ffd43b', background:'#1a1c2e', fontSize:'10px' }, position:'bottom' } }))); + label: { text: 'Spot $'+spot.toFixed(2), position:'top', orientation:'horizontal', offsetY: -2, + borderColor:'#ffd43b', borderWidth:1, + style:{ color:'#1b1d27', background:'#ffd43b', fontSize:'11px', fontWeight:700, padding: labelPad } } + }].concat(bes.map(x => ({ x, borderColor:'#5aa9ff', strokeDashArray:3, + label:{ text:'BE $'+x.toFixed(2), position:'bottom', orientation:'horizontal', offsetY: 2, + borderColor:'#2f6fd0', borderWidth:1, + style:{ color:'#ffffff', background:'#2f6fd0', fontSize:'10px', fontWeight:700, padding: labelPad } } }))); const opts = { chart: { type:'line', height:380, background:CHART_BG, foreColor:CHART_LABEL, fontFamily:'inherit', toolbar:{show:false}, animations:{enabled:false}, zoom:{enabled:false} }, @@ -618,7 +623,9 @@ yaxis: [ { y:0, y2:yMax, fillColor:'#2fb344', opacity:0.05, borderColor:'transparent' }, { y:yMin, y2:0, fillColor:'#d63939', opacity:0.05, borderColor:'transparent' }, - { y:0, borderColor:'#9aa4b2', strokeDashArray:0, label:{ text:'Break-even', borderColor:'transparent', style:{color:'#9aa4b2', background:'transparent', fontSize:'10px'}, position:'left' } }, + { y:0, borderColor:'#aeb6c4', strokeDashArray:0, + label:{ text:'P/L = 0', position:'left', borderColor:'#3a3f5a', borderWidth:1, + style:{ color:'#e8ebf2', background:'#2a2e42', fontSize:'10px', fontWeight:600, padding:labelPad } } }, ], xaxis: xAnnos, },