How to overcome overlapping series lines in highcharts spline
<p>I have a trend chart implemented using highcharts, the data is loaded via json dynamically. The chart renders properly with the data but however the series lines, data labels and symbols overlap each other at given data points. How do I overcome this?</p>

<p>Find the link to Fiddle - <a href="https://jsfiddle.net/ashanwijenayake/ft0ke201/" rel="nofollow noreferrer">https://jsfiddle.net/ashanwijenayake/ft0ke201/</a></p>

<p><a href="https://i.stack.imgur.com/h5ZHv.png" rel="nofollow noreferrer">Screenshot</a></p>

<pre><code>function renderTrendChart(){                                
    $("#trendChartContainer").highcharts({    
        title: {
            text: 'Indicator Vs Action Trend Chart',
            x: -20 
        },
        xAxis: {
            categories: trendChartCategoies
        },
        yAxis: {
            minRange: 1,
            allowDecimals: false,
            min: 0, 
            title: {
                text: 'Cases Identified'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        plotOptions: {
            series: {               
                pointPadding: 10,
                groupPadding: 10,
                cursor: 'pointer',
            }
        },
        series: [{"name": "Pneumothorax", "data": [ { "y": 1, "marker": { "symbol": "text:" }, "dataLabels": { "x": -10, "y": -2, "enabled": true, "format": "2", "style": { "fontWeight": "bold", "fontSize": "12px" } } },{ "y": 2, "marker": { "symbol": "text:" }, "dataLabels": { "x": -10, "y": -2, "enabled": true, "format": "2", "style": { "fontWeight": "bold", "fontSize": "12px" } } } ], "id": "Pneumothorax" },{"name": "Respiratory", "data": [ 0,{ "y": 1, "marker": { "symbol": "text:" }, "dataLabels": { "x": -10, "y": -2, "enabled": true, "format": "1", "style": { "fontWeight": "bold", "fontSize": "12px" } } } ], "id": "Respiratory" },{"name": "Exsanguination", "data": [ 0,{ "y": 2, "marker": { "symbol": "text:" }, "dataLabels": { "x": -10, "y": -2, "enabled": true, "format": "3", "style": { "fontWeight": "bold", "fontSize": "12px" } } } ], "id": "Exsanguination" }]
    });
}
</code></pre>