How can I format the Highcharts gantt chart to be a dashed line instead of a solid line?

Question

I have made the following gantt chart using Highcharts Gantt chart. However, i want a part of the line to be dashed instead of solid. Something like this - However i'm unable to make it dashed. It always appears to be solid. How do i make it dashed and that too, only a certain part of it ?

The following is my current chart option. 'this.series' is the data i'm providing to the chart.

{
            chart: {
                type: 'gantt',
            title: {
                text: 'Gantt Chart with Progress Indicators'
            },
            xAxis: [{
                min: Date.UTC(2016, 1, 1),
                max: Date.UTC(2016, 1, 1) + this.day * 365 * 6,
                // max: Date.UTC(2039, 12, 31),
                tickInterval: this.day * 365, // 1 year
                scrollbar: {
                    enabled: true,
                    barBorderRadius: 4,
                    height: 9,
                    minWidth: 9,
                    barBackgroundColor: '#333',
                    trackBackgroundColor: '#F2F2F2',
                    margin: -12,
                    buttonBackgroundColor: 'none',
                    buttonBorderWidth: 0,
                    buttonArrowColor: 'none',
                    buttonBorderRadius: 0,
                    showFull: false

                },
                gridLineWidth: 1,
                labels: {
                    align: 'center',
                    style: {
                        fontFamily: 'Helvetica',
                        fontSize: 13,
                        color: '#333333',
                        minWidth: '160px',
                        fontWeight: 'bold'
                        // textOverflow: 'ellipsis'
                    }
                },
           }],
            yAxis: {
                type: 'category',
                grid: {
                    cellHeight: 44,
                    columns: [{
                        title: {
                            text: 'Study ID',
                            style: {
                                fontFamily: 'Helvetica',
                                fontSize: 13,
                                color: '#333333',
                                width: '160px',
                                fontWeight: 'bold'
                             }
                        },
                        labels: {
                            format: '{point.nct_id}',
                        }
                        // categories: this.map(this.series, function (s) {
                        //     return s.name;
                        // })
                    }],
                },
                min: 0,
                max: 10,
                scrollbar: {
                    enabled: true,
                    barBorderRadius: 4,
                    height: 9,
                    minWidth: 9,
                    barBackgroundColor: '#333',
                    trackBackgroundColor: '#F2F2F2',
                    margin: -10,
                    buttonBackgroundColor: 'none',
                    buttonBorderWidth: 0,
                    buttonArrowColor: 'none',
                    buttonBorderRadius: 0,

                },
                labels: {
                    style: {
                        fontFamily: 'Helvetica',
                        fontSize: 14,
                        color: '#007BFF',
                        minWidth: '160px',
                        textOverflow: 'ellipsis'
                    }
                },
          },
            plotOptions: {
                gantt: {

                },
            },
            series: [{
                name: 'Project 1',
                type: 'gantt',
                data: this.series,
                dataLabels: [{
                    enabled: true,
                    format: '<div style="width: 16px; height: 16px; overflow: hidden; border-radius: 50%; margin-left: -12px; background: #0E4A91;"></div>',
                    useHTML: true,
                    align: 'left'
                }, {
                    enabled: true,
                    format: '<div style="width: 16px; height: 16px; overflow: hidden; border-radius: 50%; margin-right: -12px; background: #0E4A91"></div>',
                    useHTML: true,
                    align: 'right',
                    style: {
                        overflow: 'hidden'
                    }
                }],
            }],
            credits: {
                enabled: false
            }
        }

It would be a great help if someone could help me out with this. Thanks!

Answer 1

You can use line series with zones:

series: [{
    name: 'Project 1',
    type: 'line',
    zoneAxis: 'x',
    zones: [{
        value: Date.UTC(2014, 10, 28)
    }, {
        dashStyle: 'dot',
        value: Date.UTC(2014, 10, 29)
    }],
    data: [{
        x: Date.UTC(2014, 10, 27),
        y: 0
    }, {
        x: Date.UTC(2014, 10, 29),
        y: 0
    }]
}, ...]

---

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

API Reference: https://api.highcharts.com/highcharts/series.line.zones