html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    var data = getData();

​

    var chart = anychart.ganttProject();

    chart.data(data, 'as-table');

​

    var timeLine = chart.getTimeline();

​

    var customRangeMarker = timeLine.rangeMarker();

    customRangeMarker.from('2000-02-25T00:00:00');

    customRangeMarker.to('2000-02-26T00:00:00');

​

    // Sets fill settings.

    customRangeMarker.fill({

        src: 'https://static.anychart.com/images/beach.png',

        mode: 'stretch',

        opacity: 0.5

    });

​

    chart.title('Set range marker fill as an image');

    chart.container('container');

    chart.draw();

    chart.fitAll();

});

​

function getData() {

    return [

        {

            id: 1,

            name: 'Phase 1 - Strategic Plan',

            progressValue: 0.14,

            actualStart: '2000-02-24T08:00:00',

            actualEnd: '2000-02-27T08:00:00'

        },

        {

            id: 2,

            name: 'Self-Assessment',

            parent: 1,

            progressValue: 0.25,

            actualStart: '2000-02-24T08:00:00',

            actualEnd: '2000-02-29T08:00:00',

            'baselineStart': '2000-02-27T08:00:00',

            'baselineEnd': '2000-02-28T08:00:00'

        },

        {

            id: 3,

            name: 'Define business vision',

            parent: 2,

            progressValue: 0,

            actualStart: '2000-02-25T00:00:00',

            actualEnd: '2000-02-25T09:00:00',

            connectTo: 4,

            connectorType: 'finish-start'

        },

        {

            id: 4,

            name: 'Identify available skills, information and support',

            parent: 2,

            progressValue: 0,

            actualStart: '2000-02-26T00:00:00',

            actualEnd: '2000-02-26T09:00:00',

            connectTo: 5,

            connectorType: 'finish-start'

        },

        {

            id: 5,

            name: 'Decide whether to proceed',

            parent: 2,

            progressValue: 0,

            actualStart: '2000-02-27T08:00:00',

            actualEnd: '2000-02-28T08:00:00',

            connectTo: 6,

            connectorType: 'finish-start'

        },

        {

            id: 6,

            name: 'Define the Opportunity',

            parent: 1,

            progressValue: 0.27,

            actualStart: '2000-02-28T08:00:00',

            actualEnd: '2000-02-29T08:00:00'

        },

        {

            id: 7,

            name: 'Research the market and competition',

            parent: 6,

            progressValue: 0,

            actualStart: '2000-02-26T08:00:00',

            actualEnd: '2000-02-27T08:00:00'

        }

    ];

}