Highcharts Demo

author(s): Daniel Studencki

by Black Label

HTML

<script src="https://code.highcharts.com/7.1.0/highcharts.js"></script>
<script src="https://code.highcharts.com/7.1.0/modules/timeline.js"></script>

<div id="container"></div>

CSS

#container {
  height: 600px;
  margin: 0 auto;
}

.highcharts-strong {
  font-weight: bold;
}

JavaScript

(function(H) {
  var Timeline = H.seriesTypes.timeline

  Timeline.prototype.alignDataLabel = function(point, dataLabel) {
    var series = this,
      isInverted = series.chart.inverted,
      visiblePoints = series.visibilityMap.filter(function(point) {
        return point;
      }),
      visiblePointsCount = series.visiblePointsCount,
      pointIndex = visiblePoints.indexOf(point),
      dataLabelsOptions = series.options.dataLabels,
      rows = dataLabelsOptions.secondRow ? 2 : 1,
      isEdge = pointIndex < rows || pointIndex >= visiblePointsCount - rows,
      isFirstOrLast = !pointIndex ||
      pointIndex === visiblePointsCount - 1,
      userDLOptions = point.userDLOptions || {},
      // Define multiplier which is used to calculate data label
      // width. If data labels are alternate, they have two times more
      // space to adapt (excepting first and last ones, which has only
      // one and half), than in case of placing all data labels side
      // by side.
      multiplier = dataLabelsOptions.alternate ?
      isEdge ?
      (isFirstOrLast ? rows + 0.5 : rows + 1.5) :
      rows * 2 :
      rows,
      distance,
      availableSpace = Math.floor(
        series.xAxis.len / visiblePointsCount
      ),
      pad = dataLabel.padding,
      targetDLWidth,
      styles;

    // Adjust data label width to the currently available space.
    if (point.visible) {
      distance = Math.abs(
        userDLOptions.x || point.options.dataLabels.x
      );
      if (isInverted) {
        targetDLWidth = (
          (distance - pad) * 2 - (point.itemHeight / 2)
        );
        styles = {
          width: targetDLWidth,
          // Apply ellipsis when data label height is exceeded.
          textOverflow: dataLabel.width / targetDLWidth *
            dataLabel.height / 2 > availableSpace * multiplier ?
            'ellipsis' : 'none'
        };
      } else {
        styles = {
          width: userDLOptions.width ||
           ...