Shestac92/exampl.html

## exampl.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
    <script src="https://cdn.anychart.com/js/7.14.3/data-adapter.min.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css" />
    <style>
        html, body, #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<script>
    // load CSV data and create a chart by CSV data.
    anychart.data.loadCsvFile('https://static.anychart.com/cdn/csv-data/aapl-daily.csv', function (data) {
        // create data table on loaded data
        var dataTable = anychart.data.table();
        dataTable.addData(data);

        // map loaded data
        var mapping = dataTable.mapAs({
            open: 1,
            high: 2,
            low: 3,
            close: 4,
            value: {
                column: 6,
                type: 'sum'
            }
        });

        // create stock chart
        var chart = anychart.stock();

        // set chart padding
        chart.padding()
                .right(55)
                .bottom(7)
                .left(22);

        // create first plot on the chart with column series
        var plot = chart.plot(0);
        plot.grid(0).enabled(true);
        plot.grid(1).enabled(true)
                .layout('vertical');

        plot.yAxis().orientation('right');

        // create area series on the first plot
        var aaplSeries = plot.candlestick(mapping);
        // set position for the first stage
        aaplSeries.name('AAPL')
                .stroke('2 #1a9af9')
                .fill(['#1a9af9', '#FFFFFF'], -90, true, 0.25)
                .zIndex(50);
        aaplSeries.legendItem({
            iconEnabled: false
        });
        aaplSeries.risingFill('red', 0.6)
                .fallingFill('green', 0.6)
                .risingStroke('red', 0.6)
                .fallingStroke('green', 0.6)
                .hoverRisingFill('red', 0.7)
                .hoverFallingFill('green', 0.7)
                .hoverRisingStroke('red', 0.7)
                .hoverFallingStroke('green', 0.7);

        // create EMA indicators with period 50
        var ema = plot.ema(dataTable.mapAs({'value': 4}));
        ema.series()
                .stroke('1.5 #5FB1EE')
                .legendItem({
                    textOverflow: '',
                    iconEnabled: false
                });

        // create annotation
        var annotation = plot.annotations();
        // create annotation triangle
        annotation.triangle({
            // X - part of the first anchor
            xAnchor: '2016-09-09',
            // Y - part of the first anchor
            valueAnchor: 103.13,
            // X - part of the second anchor
            secondXAnchor: '2016-09-15',
            // Y - part of the second anchor
            secondValueAnchor: 115.57,
            // X - part of the third anchor
            thirdXAnchor: '2016-10-25',
            // Y - part of the third anchor
            thirdValueAnchor: 118.25,
            // set stroke settings
            stroke: '1.5 #6E9C4E 0.5',
            // set fill settings
            fill: '#6E9C4E 0.15'
            // disable interaction with Annotation
        }).allowEdit(false);

        var volumeSeries = plot.column(mapping).name('Volume');
        volumeSeries.zIndex(100)
                .maxHeight('25%')
                .bottom(0);
        volumeSeries.legendItem({
            textOverflow: '',
            iconEnabled: false
        });

        var customScale = anychart.scales.log();
        // sets y-scale
        volumeSeries.yScale(customScale);

        // we setup custom series drawer to support coloring values below zero
        setupDrawer(volumeSeries);

        volumeSeries.risingFill('red', 0.25);
        volumeSeries.fallingFill('green', 0.25);
        volumeSeries.risingStroke('red', 0.25);
        volumeSeries.fallingStroke('green', 0.25);

        chart.scroller(false);

        // set chart selected date/time range
        chart.selectRange('2016-07-01', '2016-12-30');

        // set container id for the chart
        chart.container('container');
        // initiate chart drawing
        chart.draw();

        // create range picker
        rangePicker = anychart.ui.rangePicker();
        // init range picker
        rangePicker.render(chart);

        // create range selector
        rangeSelector = anychart.ui.rangeSelector();
        // init range selector
        rangeSelector.render(chart);

        function setupDrawer(series) {
            var shapesConfig = [{
                name: 'rising',
                shapeType: 'path',
                fillNames: ['risingFill'],
                strokeNames: ['risingStroke'],
                isHatchFill: false,
                zIndex: 0
            }, {
                name: 'risingHatchFill',
                shapeType: 'path',
                fillNames: ['risingHatchFill'],
                strokeNames: null,
                isHatchFill: true,
                zIndex: 1
            }, {
                name: 'falling',
                shapeType: 'path',
                fillNames: ['fallingFill'],
                strokeNames: ['fallingStroke'],
                isHatchFill: false,
                zIndex: 0
            }, {
                name: 'fallingHatchFill',
                shapeType: 'path',
                fillNames: ['fallingHatchFill'],
                strokeNames: null,
                isHatchFill: true,
                zIndex: 1
            }];
            series.rendering()
                    .shapes(shapesConfig)
                    .point(function (point) {
                        if (!point.missing) {
                            var rising = +point.getDataValue('open') < +point.getDataValue('close');
                            var shapeNames = rising ? ['rising', 'risingHatchFill'] : ['falling', 'fallingHatchFill'];
                            var shapes = point.getShapesGroup(point.seriesState, 0, shapeNames);
                            var path = shapes[shapeNames[0]];
                            var hatch = shapes[shapeNames[1]];

                            var leftX = point.x - point.pointWidth / 2;
                            var rightX = leftX + point.pointWidth;

                            var thickness = getThickness(path.stroke());
                            if ((point.categoryWidth - point.pointWidth) > 2.5 && point.pointWidth > 10) {
                                leftX = applyShift(leftX, thickness);
                                rightX = applyShift(rightX, thickness);
                            }
                            var y = applyShift(point.value, thickness);
                            var zero = applyShift(point.zero, thickness);

                            path.moveTo(leftX, y);
                            path.lineTo(rightX, y, rightX, zero, leftX, zero);
                            path.close();
                            hatch.moveTo(leftX, y);
                            hatch.lineTo(rightX, y, rightX, zero, leftX, zero);
                            hatch.close();
                        }
                    });

            function applyShift(value, thickness) {
                var shift = (thickness & 1) / 2;
                if (value % 1 >= 0.5)
                    return Math.ceil(value) - shift;
                else
                    return Math.floor(value) + shift;
            }

            function getThickness(stroke) {
                var res;
                return (stroke && stroke != 'none') ?
                        (isNaN(res = stroke['thickness']) || res === null ? 1 : res) :
                        0;
            }
        }
    });
</script>
<body>
<div id="container"></div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
	<script src="https://cdn.anychart.com/js/7.14.3/data-adapter.min.js"></script>
	<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css" />
	<style>
	html, body, #container {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<script>
	// load CSV data and create a chart by CSV data.
	anychart.data.loadCsvFile('https://static.anychart.com/cdn/csv-data/aapl-daily.csv', function (data) {
	// create data table on loaded data
	var dataTable = anychart.data.table();
	dataTable.addData(data);

	// map loaded data
	var mapping = dataTable.mapAs({
	open: 1,
	high: 2,
	low: 3,
	close: 4,
	value: {
	column: 6,
	type: 'sum'
	}
	});

	// create stock chart
	var chart = anychart.stock();

	// set chart padding
	chart.padding()
	.right(55)
	.bottom(7)
	.left(22);

	// create first plot on the chart with column series
	var plot = chart.plot(0);
	plot.grid(0).enabled(true);
	plot.grid(1).enabled(true)
	.layout('vertical');

	plot.yAxis().orientation('right');

	// create area series on the first plot
	var aaplSeries = plot.candlestick(mapping);
	// set position for the first stage
	aaplSeries.name('AAPL')
	.stroke('2 #1a9af9')
	.fill(['#1a9af9', '#FFFFFF'], -90, true, 0.25)
	.zIndex(50);
	aaplSeries.legendItem({
	iconEnabled: false
	});
	aaplSeries.risingFill('red', 0.6)
	.fallingFill('green', 0.6)
	.risingStroke('red', 0.6)
	.fallingStroke('green', 0.6)
	.hoverRisingFill('red', 0.7)
	.hoverFallingFill('green', 0.7)
	.hoverRisingStroke('red', 0.7)
	.hoverFallingStroke('green', 0.7);

	// create EMA indicators with period 50
	var ema = plot.ema(dataTable.mapAs({'value': 4}));
	ema.series()
	.stroke('1.5 #5FB1EE')
	.legendItem({
	textOverflow: '',
	iconEnabled: false
	});

	// create annotation
	var annotation = plot.annotations();
	// create annotation triangle
	annotation.triangle({
	// X - part of the first anchor
	xAnchor: '2016-09-09',
	// Y - part of the first anchor
	valueAnchor: 103.13,
	// X - part of the second anchor
	secondXAnchor: '2016-09-15',
	// Y - part of the second anchor
	secondValueAnchor: 115.57,
	// X - part of the third anchor
	thirdXAnchor: '2016-10-25',
	// Y - part of the third anchor
	thirdValueAnchor: 118.25,
	// set stroke settings
	stroke: '1.5 #6E9C4E 0.5',
	// set fill settings
	fill: '#6E9C4E 0.15'
	// disable interaction with Annotation
	}).allowEdit(false);

	var volumeSeries = plot.column(mapping).name('Volume');
	volumeSeries.zIndex(100)
	.maxHeight('25%')
	.bottom(0);
	volumeSeries.legendItem({
	textOverflow: '',
	iconEnabled: false
	});

	var customScale = anychart.scales.log();
	// sets y-scale
	volumeSeries.yScale(customScale);

	// we setup custom series drawer to support coloring values below zero
	setupDrawer(volumeSeries);

	volumeSeries.risingFill('red', 0.25);
	volumeSeries.fallingFill('green', 0.25);
	volumeSeries.risingStroke('red', 0.25);
	volumeSeries.fallingStroke('green', 0.25);

	chart.scroller(false);

	// set chart selected date/time range
	chart.selectRange('2016-07-01', '2016-12-30');

	// set container id for the chart
	chart.container('container');
	// initiate chart drawing
	chart.draw();

	// create range picker
	rangePicker = anychart.ui.rangePicker();
	// init range picker
	rangePicker.render(chart);

	// create range selector
	rangeSelector = anychart.ui.rangeSelector();
	// init range selector
	rangeSelector.render(chart);

	function setupDrawer(series) {
	var shapesConfig = [{
	name: 'rising',
	shapeType: 'path',
	fillNames: ['risingFill'],
	strokeNames: ['risingStroke'],
	isHatchFill: false,
	zIndex: 0
	}, {
	name: 'risingHatchFill',
	shapeType: 'path',
	fillNames: ['risingHatchFill'],
	strokeNames: null,
	isHatchFill: true,
	zIndex: 1
	}, {
	name: 'falling',
	shapeType: 'path',
	fillNames: ['fallingFill'],
	strokeNames: ['fallingStroke'],
	isHatchFill: false,
	zIndex: 0
	}, {
	name: 'fallingHatchFill',
	shapeType: 'path',
	fillNames: ['fallingHatchFill'],
	strokeNames: null,
	isHatchFill: true,
	zIndex: 1
	}];
	series.rendering()
	.shapes(shapesConfig)
	.point(function (point) {
	if (!point.missing) {
	var rising = +point.getDataValue('open') < +point.getDataValue('close');
	var shapeNames = rising ? ['rising', 'risingHatchFill'] : ['falling', 'fallingHatchFill'];
	var shapes = point.getShapesGroup(point.seriesState, 0, shapeNames);
	var path = shapes[shapeNames[0]];
	var hatch = shapes[shapeNames[1]];

	var leftX = point.x - point.pointWidth / 2;
	var rightX = leftX + point.pointWidth;

	var thickness = getThickness(path.stroke());
	if ((point.categoryWidth - point.pointWidth) > 2.5 && point.pointWidth > 10) {
	leftX = applyShift(leftX, thickness);
	rightX = applyShift(rightX, thickness);
	}
	var y = applyShift(point.value, thickness);
	var zero = applyShift(point.zero, thickness);

	path.moveTo(leftX, y);
	path.lineTo(rightX, y, rightX, zero, leftX, zero);
	path.close();
	hatch.moveTo(leftX, y);
	hatch.lineTo(rightX, y, rightX, zero, leftX, zero);
	hatch.close();
	}
	});

	function applyShift(value, thickness) {
	var shift = (thickness & 1) / 2;
	if (value % 1 >= 0.5)
	return Math.ceil(value) - shift;
	else
	return Math.floor(value) + shift;
	}

	function getThickness(stroke) {
	var res;
	return (stroke && stroke != 'none') ?
	(isNaN(res = stroke['thickness']) \|\| res === null ? 1 : res) :
	0;
	}
	}
	});
	</script>
	<body>
	<div id="container"></div>
	</body>
	</html>