Search code examples
javascripthighchartshighcharts-gantt

Highcharts Gantt - how to use a different shape for the milestone markers?

Is there a way to use a different shape for the milestone markers in Highcharts Gantt? I'd like to use triangles instead of the default diamonds.

If a solution for this involves using the API to change something in the chart after the chart is loaded and telling it to redraw (instead of doing something with the configuration options), I'm fine with that.

Solution

  • As you can see in the Highcharts Gantt source code: https://github.com/highcharts/highcharts/blob/47dfb49f7b6053178c92d24b34b5f3e7ddd8770b/ts/Series/Gantt/GanttSeries.ts#L202

    shape for milestone can not be set through API options.

    The simplest solution is to replace diamond function with the built in triangle function.

    (function(H) {
    H.Renderer.prototype.symbols.diamond = H.Renderer.prototype.symbols.triangle
})(Highcharts);

    Live demo: https://jsfiddle.net/BlackLabel/9zuodLjt/

    Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts