html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    var chart = anychart.candlestick();

​

    var series1 = chart.candlestick([

        {x: Date.UTC(2017, 7, 28), open: 511.53, high: 514.98, low: 505.79, close: 506.40},

        {x: Date.UTC(2017, 7, 29), open: 507.84, high: 513.30, low: 507.23, close: 512.88},

        {x: Date.UTC(2017, 7, 30), open: 512.36, high: 515.40, low: 510.58, close: 511.40},

        {x: Date.UTC(2017, 7, 31), open: 513.10, high: 516.50, low: 511.47, close: 515.25}

    ]);

    series1.risingHatchFill('zig-zag');

​

    var series2 = chart.candlestick([

        {x: Date.UTC(2017, 7, 28), open: 522.95, high: 523.10, low: 519.50, close: 520.52},

        {x: Date.UTC(2017, 7, 29), open: 522.60, high: 524.69, low: 515.27, close: 517.55},

        {x: Date.UTC(2017, 7, 30), open: 522.49, high: 522.91, low: 522.38, close: 522.61},

        {x: Date.UTC(2017, 7, 31), open: 522.81, high: 523.83, low: 520.51, close: 521.73}

    ]);

​

    // Get rising hatch fill.

    var risingHatchFill = series1.risingHatchFill();

​

    series2.risingHatchFill(risingHatchFill);

​

    chart.xScale().minimum(Date.UTC(2017, 7, 27)).maximum(Date.UTC(2017, 8, 1));

    chart.title('Get and use rising hatch fill');

    chart.container('container');

    chart.draw();

});