Highcharts Timeline Datalabels Width

by Serghei Cebotari

HTML

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

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

CSS

#container {
    min-width: 400px;
    max-width: 600px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    zoomType: 'x',
    type: 'timeline'
  },
  xAxis: {
    type: 'datetime',
    visible: false
  },
  yAxis: {
    gridLineWidth: 1,
    title: null,
    labels: {
      enabled: false
    }
  },
  legend: {
    enabled: false
  },
  tooltip: {
    enabled: false,
    style: {
      width: 300
    }
  },
  series: [{
    dataLabels: {
      allowOverlap: false,
      format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
        '{point.x}</span><br/>{point.label}'
    },
    marker: {
      symbol: 'circle'
    },
    data: [{
        "x": 1,
        "label": "Label 1"
      },
      {
        "x": 2,
        "label": "Label 2"
      },
      {
        "x": 3,
        "label": "Label 3"
      },
      {
        "x": 4,
        "label": "Label 4"
      },
      {
        "x": 5,
        "label": "Label 5"
      },
      {
        "x": 6,
        "label": "Label 6"
      },
      {
        "x": 7,
        "label": "Label 7"
      },
      {
        "x": 8,
        "label": "Label 8"
      },
      {
        "x": 9,
        "label": "Label 9"
      },
      {
        "x": 10,
        "label": "Label 10"
      },
      {
        "x": 11,
        "label": "Label 11"
      },
      {
        "x": 12,
        "label": "Label 12"
      },
      {
        "x": 13,
        "label": "Label 13"
      },
      {
        "x": 14,
        "label": "Label 14"
      },
      {
        "x": 15,
        "label": "Label 15"
      },
      {
        "x": 16,
        "label": "Label 16"
      },
      {
        "x": 17,
        "label": "Label 17"
      },
      {
        "x": 18,
        "label": "Label 18"
      },
      {
        "x": 19,
        "label": "Label 19"
      },
      {
        "x": 20,
        "label": "Label 20"
      },
      {
        "x": 21,
        "label": "Label 21"
      },
      {
        "x": 22,
        "label": "Label 22"
      },
      {
        "x": 23,
        "label":...