Plot options customization in highchart graphs

Question

I have a highchart chart container in Angular which contains a marker, a line, and an area graph together. I am trying to display the labels in the graphs without a tooltip option. and the labels are displayed on the charts. But I have a few styling issues with the following example I am a bit confused about the label positioning.

Here is the working code.

In the above,

1. The marker value is displaying, but the name is not displaying.
2. When the graphs come to a smaller value, all the labels will get overlapped and difficult to read. I need to solve this.
3. In the area graph, I only need to show the label as left starting as "Band Start" and right end as "Band End", Currently it shows whatever the value gives in the coordinate.(I tried removing the names but it shows like ' : value').

Here is the code snippet I have added to plot the positions.

 Highcharts.SVGRenderer.prototype.symbols.connector = function(x, y, w, h, options) {
   var anchorX = options && options.anchorX,
     anchorY = options && options.anchorY,
     path,
     yOffset,
     lateral = w / 2,
     H = Highcharts;
   if (H.isNumber(anchorX) && H.isNumber(anchorY)) {
     path = ['M', anchorX, anchorY];
     // Prefer 45 deg connectors
     yOffset = y - anchorY;
     if (yOffset < 0) {
       yOffset = -h - yOffset;
     }
     if (yOffset < w) {
       lateral = anchorX < x + (w / 2) ? yOffset : w - yOffset;
     }
     // Anchor below label
     if (anchorY > y + h) {
       path.push('L', x + lateral, y + h);
       // Anchor above label
     } else if (anchorY < y) {
       path.push('L', x + lateral, y);
       // Anchor left of label
     } else if (anchorX < x) {
       path.push('L', x, y + h / 2);
       // Anchor right of label
     } else if (anchorX > x + w) {
       path.push('L', x + w, y + h / 2);
     }
   }
   return path || [];
 };

Answer 1

1. You've set data-labels format as '{point.name}' + ': ' + '{x}', but there is no defined name for the marker point in the last series. You can add it as below:

---

   series: [...,
     {
       data: [{
         x: Math.round(currentlyAchievableChartData.bar_graph_med),
         y: 0,
         name: 'Estimated Achievable Property Value - Med',
         ...
       }],
       ...
     }
   ]

2. There is a built-in anti-collision logic for data-labels, but with using a custom shape you need to take care of this on your own. The easiest way will be to set some width:

---

   plotOptions: {
     series: {
       dataLabels: {
         ...,
         style: {
           width: 60
         }
       }
     }
   }

3. Just set different data-labels format for area series:

---

   plotOptions: {
     ...,
     area: {
       dataLabels: {
         format: '{point.name}'
       }
     }
   }

Live demo: https://jsfiddle.net/BlackLabel/bokyaqxf/