[Solved]-Highcharts - How do I keep both line points in from splitting between the two bar charts-Highcharts

currently you have both indicators in one stack group which makes the values in second indicator to add up with first one. if you want them to look like the second images in your question you should seperate their groups using stack: value option in their series. somthing like this: (note stack: 0 in indicator1 and stack: 1 in indicator2)

mychart.addseries({ type: 'line', name: 'indicator1', linewidth: 0,  
data: [3.3, 2, 3, 6, 3], stack : 0, pointplacement: 0.3, showinlegend: true, 
datalabels: { enabled: true, allowoverlap: true, verticalalign: 'top', align: 'right', color: '#ff0000', style: { textoutline: false } }, 
marker: { symbol: 'circle', fillcolor: '#ff0000' }, 
states: { hover: { enabled: false }, }
});


mychart.addseries({ type: 'line', name: 'indicator2', data: [3.3, 2, 3, 6, 
3],stack:1, pointplacement: -0.3, showinlegend: true, datalabels: { enabled: true, 
allowoverlap: true, verticalalign: 'bottom', align: 'right',  style: { textoutline: 
false }, x: 0, y: 0 }, linewidth: 0, marker: { symbol: 'diamond', fillcolor: 
'#000000' }, states: { hover: { enabled: false }, }

jsfiddle: https://jsfiddle.net/3pfm8laz/

api reference: https://api.highcharts.com/highcharts/series.line.stack