Popout data label for a small bar chart

Question

I am trying to recreate the design this design EU regulation diagram for fossil and nuclear fuel

I have made it to a point where im almost satisfied with it. but the issue lies when the values are small to the point their not visible (the data label isn't visible), in the design they have this issue resolved. solution for small values

I've looked trough the API documentation and i wasn't able to find if the solution is possible. Only thing that comes to mind is setting the 'y' on the series where if its small it would go up, but the logic would be finicky because i don't know if it be shown or cropped. { name: 'Summa', data: [0.5, 60, 40], color: 'transparent', stack: 0, borderColor: '#303030', dataLabels:{ format:'{y} %', y:-20, backgroundColor: 'white' } }

This is my current solution: https://jsfiddle.net/BrankoSabo/n1Lcpgmr/120/

Answer 1

You can set position for an individual data point data label:

  series: [..., {
    data: [{
      y: 0.5,
      dataLabels: {
        y: -15
      }
    }, 15, 20],
    ...
  }]

---

Live demo: https://jsfiddle.net/BlackLabel/87qanwcz/

API Reference: https://api.highcharts.com/highcharts/series.bar.data.dataLabels

---

If you need a more general and dynamic solution, you can find points with a smaller height than the related data label width and modify the data label's position. For example:

  chart: {
    type: 'bar',
    events: {
      load: function() {
        this.series.forEach(s => {
          if (s.name !== 'Summa') {
            s.points.forEach(point => {
              if (point.y > 0 && point.dataLabel.width > point.shapeArgs.height) {
                point.dataLabel.attr({
                  y: point.dataLabel.y - 20
                });
              }
            });
          }
        });
      }
    }
  }

---

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

API Reference: https://api.highcharts.com/highcharts/chart.events