How to add custom milestone on Highcharts Gantt?

SixtyEight 0
Viewed 26

I have a Highcharts Gantt chart

I am using milestones but I need the milestone to be placed above the line and also to a custom SVG.

enter image description here

This is a fiddle

This is the code:

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart with Progress Indicators'
  },


  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        verticalAlign: "top",
        format: "{point.custom.label}"
      }
    }
  },
  yAxis: {
    uniqueNames: true,
    categories: ['Magdala', 'Test prototype', 'Develop'],
  },
  series: [{
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 20)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 25)
    }],
    data: [{
      name: 'Magdala',
      y: 0,
      x: Date.UTC(2014, 10, 18),
      custom: {
        label: 1
      }
    }, {
      name: 'Magdala',
      y: 0,
      x: Date.UTC(2014, 10, 25, 12),
      custom: {
        label: 2
      }
    }]
  }, {
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 28)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 29)
    }],
    data: [{
        name: 'Magdala',
        x: Date.UTC(2014, 10, 25, 16),
        y: 0,
        custom: {
          label: 3
        }
      }, {
        name: 'Magdala',
        x: Date.UTC(2014, 10, 29),
        y: 0,
        custom: {
          label: 4
        },

      },
      {
        name: 'MILESTONE',
        x: Date.UTC(2014, 10, 28),
        y: 0,
        milestone: true,
        pointWidth: 100,
        color: '#fa0',
        custom: {
          label: 'MILESTONE'
        }
      }
    ]
  }]
});

How can I replace this milestone for a custom SVG?

highcharts-gantt react-highcharts highcharts gantt-chart javascript
1 Answers

This is not possible straight from the API options but you can achieve that by translating the position of a point (milsestone) and its dataLabel in the chart.load() event.

 chart: {
    events: {
      load() {
        let chart = this;
        chart.series[1].points[2].graphic.translate(0, -10);
        chart.series[1].points[2].dataLabel.text.translate(0, -30);
      }
    }
  }

Demo: https://jsfiddle.net/BlackLabel/Lau46nbr/

EDIT:

As Sebastian mentioned, you can add text using Highcharts SVG Renderer as well. In fact, you can add any shape/label using this solution. Check the API to find out the possibilities: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

magdalena0
Related