html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    var stage = anychart.graphics.create("container");

​

    var dataSet = anychart.data.set([

        {x: "Physical", value: 125},

        {x: "Data Link", value: 125},

        {x: "Network", value: 125},

        {x: "Transport", value: 125},

        {x: "Session", value: 125},

        {x: "Presentation", value: 125},

        {x: "Application", value: 290}

    ]);

​

    var pyramidChart = anychart.pyramid(dataSet);

    pyramidChart.bounds(0, 0, "50%", "100%");

    pyramidChart.selectHatchFill("diagonalBrick", "#E0E0E0", 0.4, 25);

    pyramidChart.container(stage);

    pyramidChart.draw();

​

    var pieChart = anychart.pie([7, 7, 7, 7, 7, 7, 7]);

    pieChart.hatchFill(true);

    pieChart.bounds("50%", 0, "50%", "100%");

​

    // Get hatch fill in selected state.

    var pyramidChartSelectHatchFill = pyramidChart.selectHatchFill();

​

    pieChart.hatchFill(pyramidChartSelectHatchFill);

    pieChart.container(stage);

    pieChart.draw();

​

    var customTitle = anychart.standalones.title();

    customTitle.text("Get and use chart selectHatchFill.");

    customTitle.container(stage);

    customTitle.draw();

});