Annotated Candlestick Chart | #Km3nL5gK

HTMLcopy

​x
 
<table class="table-container" width="100%">
    <tr>
        <td>
            <div class="toolbar">
                <div class="btn-group">
                    <button type="button" class="btn btn-default color-picker" data-color="fill" data-toggle="tooltip"
                            title="Сhoose drawing fill color"><span
                            class="color-fill-icon dropdown-color-fill-icon"></span>&nbsp;<b
                            class="caret"></b>
                    </button>
​
                    <button type="button" class="btn btn-default color-picker" data-color="stroke" data-toggle="tooltip"
                            title="Сhoose drawing stroke color"><span
                            class="color-fill-icon dropdown-color-fill-icon"></span>&nbsp;<b
                            class="caret"></b>
                    </button>
​
                    <select class="selectpicker" id="select-stroke-settings"
                            title="Stroke settings"
                            data-style="btn-lg" data-width="121" multiple>
                        <optgroup label="Stroke width" data-max-options="1">
                            <option data-settings="width" value="0">0 px</option>
                            <option data-settings="width" value="1" selected>1 px</option>
                            <option data-settings="width" value="2">2 px</option>
                            <option data-settings="width" value="3">3 px</option>
                            <option data-settings="width" value="4">4 px</option>
                            <option data-settings="width" value="5">5 px</option>
                        </optgroup>
                        <optgroup label="Stroke dash" data-max-options="1">
                            <option value="6" data-settings="type" selected>solid</option>
                            <option value="7" data-settings="type">dotted</option>
                            <option value="8" data-settings="type">dashed</option>
                        </optgroup>
                    </select>
                </div>
                <div class="btn-group">
                    <button type="button" data-action-type="unSelectedAnnotation" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Cursor">
                        <i class="ac ac-mouse-pointer" aria-hidden="true"></i>
                    </button>
                </div>
​
                <div class="select-container">
                    <select class="selectpicker choose-drawing-tools"
                            title="Drawing tools"
                            data-style="btn-lg" data-width="133" data-max-options="1">
                        <optgroup label="Lines, Trend lines and Rays:">
                            <option data-icon="ac-line" data-annotation-type="line">Line Segment</option>
                            <option data-icon="ac-horizontal-line" data-annotation-type="horizontal-line">Horizontal
                                Line
                            </option>
                            <option data-icon="ac-vertical-line" data-annotation-type="vertical-line">Vertical Line
                            </option>
                            <option data-icon="ac-infinite-line" data-annotation-type="infinite-line">Infinite Line
                            </option>
                            <option data-icon="ac-ray" data-annotation-type="ray">Ray</option>
                        </optgroup>
                        <optgroup label="Geometric shapes:">
                            <option data-icon="ac-triangle" data-annotation-type="triangle">Triangle</option>
                            <option data-icon="ac-rectangle" data-annotation-type="rectangle">Rectangle</option>
                            <option data-icon="ac-ellipse" data-annotation-type="ellipse">Ellipse</option>
                        </optgroup>
                        <optgroup label="Other tools:">
                            <option data-icon="ac-trend-channel" data-annotation-type="trend-channel">Trend Channel
                            </option>
                            <option data-icon="ac-andrews-pitchfork" data-annotation-type="andrews-pitchfork">
                                Andrew's
                                Pitchfork
                            </option>
                        </optgroup>
                        <optgroup label="Fibonacci tools:">
                            <option data-icon="ac-fibonacci-fan" data-annotation-type="fibonacci-fan">Fibonacci Fan
                            </option>
                            <option data-icon="ac-fibonacci-arc" data-annotation-type="fibonacci-arc">Fibonacci Arc
                            </option>
                            <option data-icon="ac-fibonacci-retracement"
                                    data-annotation-type="fibonacci-retracement">Fibonacci
                                Retracement
                            </option>
                            <option data-icon="ac-fibonacci-timezones" data-annotation-type="fibonacci-timezones">
                                Fibonacci Time
                                Zones
                            </option>
                        </optgroup>
                    </select>
                </div>
​
                <div class="btn-group hidden-xs">
                    <button data-annotation-type="line" type="button" class="btn btn-default" aria-label="Center Align"
                            data-toggle="tooltip" title="Line Segment">
                        <i class="ac ac-line" aria-hidden="true"></i>
                    </button>
                    <button data-annotation-type="horizontal-line" type="button" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Horizontal Line">
                        <i class="ac ac-horizontal-line" aria-hidden="true"></i>
                    </button>
                    <button data-annotation-type="vertical-line" type="button" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Vertical Line">
                        <i class="ac ac-vertical-line" aria-hidden="true"></i>
                    </button>
                    <button data-annotation-type="infinite-line" type="button" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Infinite Line">
                        <i class="ac ac-infinite-line" aria-hidden="true"></i>
                    </button>
                    <button data-annotation-type="ray" type="button" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Ray">
                        <i class="ac ac-ray" aria-hidden="true"></i>
                    </button>
                </div>
​
                <div class="btn-group hidden-xs">
                    <button data-annotation-type="triangle" type="button" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Triangle">
                        <i class="ac ac-triangle" aria-hidden="true"></i>
                    </button>
                    <button data-annotation-type="rectangle" type="button" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Rectangle">
                        <i class="ac ac-rectangle" aria-hidden="true"></i>
                    </button>
                    <button data-annotation-type="ellipse" type="button" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Ellipse">
                        <i class="ac ac-ellipse" aria-hidden="true"></i>
                    </button>
                </div>
​
                <div class="btn-group hidden-xs">
                    <button data-annotation-type="trend-channel" type="button" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Trend Channel">
                        <i class="ac ac-trend-channel" aria-hidden="true"></i>
                    </button>
                    <button data-annotation-type="andrews-pitchfork" type="button" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Andrew's Pitchfork">
                        <i class="ac ac-andrews-pitchfork" aria-hidden="true"></i>
                    </button>
                </div>
​
                <div class="btn-group hidden-xs">
                    <button data-annotation-type="fibonacci-fan" type="button" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Fibonacci Fan">
                        <i class="ac ac-fibonacci-fan" aria-hidden="true"></i>
                    </button>
                    <button data-annotation-type="fibonacci-arc" type="button" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Fibonacci Arc">
                        <i class="ac ac-fibonacci-arc" aria-hidden="true"></i>
                    </button>
                    <button data-annotation-type="fibonacci-retracement" type="button" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Fibonacci Retracement">
                        <i class="ac ac-fibonacci-retracement" aria-hidden="true"></i>
                    </button>
                    <button data-annotation-type="fibonacci-timezones" type="button" class="btn btn-default"
                            aria-label="Center Align" data-toggle="tooltip" title="Fibonacci Time Zones">
                        <i class="ac ac-fibonacci-timezones" aria-hidden="true"></i>
                    </button>
​
                </div>
​
                <div class="btn-group-container">
                    <div class="btn-group">
​
                        <select class="selectpicker select choose-marker" id="select-marker-type"
                                title="Marker"
                                data-style="btn-lg" data-width="90" data-max-options="1">
                            <option data-icon="ac-arrow-up-square" data-annotation-type="marker"
                                    data-marker-type="arrowUp"
                                    data-marker-anchor="center-top">Up Arrow
                            </option>
                            <option data-icon="ac-arrow-down-square" data-annotation-type="marker"
                                    data-marker-type="arrow-down" data-marker-anchor="center-bottom">Down Arrow
                            </option>
                            <option data-icon="ac-arrow-left-square" data-annotation-type="marker"
                                    data-marker-type="arrow-left" data-marker-anchor="left-center">Left Arrow
                            </option>
                            <option data-icon="ac-arrow-right-square" data-annotation-type="marker"
                                    data-marker-type="arrow-right" data-marker-anchor="right-center">Right Arrow
                            </option>
                            <option data-icon="ac-head-arrow" data-annotation-type="marker"
                                    data-marker-type="arrowHead"
                                    data-marker-anchor="right-center">Head Arrow
                            </option>
                            <option data-icon="ac-cross" data-annotation-type="marker" data-marker-type="cross"
                                    data-marker-anchor="center">Cross
                            </option>
                            <option data-icon="ac-diagonal-cros" data-annotation-type="marker"
                                    data-marker-type="diagonal-cross"
                                    data-marker-anchor="center">Diagonal cross
                            </option>
                            <option data-icon="ac-diamond" data-annotation-type="marker" data-marker-type="diamond"
                                    data-marker-anchor="center">Diamond
                            </option>
                            <option data-icon="ac-pentagon" data-annotation-type="marker" data-marker-type="pentagon"
                                    data-marker-anchor="center">Pentagon
                            </option>
                            <option data-icon="ac-square" data-annotation-type="marker" data-marker-type="square"
                                    data-marker-anchor="center">Square
                            </option>
                            <option data-icon="ac-star-1" data-annotation-type="marker" data-marker-type="star10"
                                    data-marker-anchor="center">Star 1
                            </option>
                            <option data-icon="ac-star-2" data-annotation-type="marker" data-marker-type="star4"
                                    data-marker-anchor="center">Star 2
                            </option>
                            <option data-icon="ac-star-3" data-annotation-type="marker" data-marker-type="star5"
                                    data-marker-anchor="center">Star 3
                            </option>
                            <option data-icon="ac-star-4" data-annotation-type="marker" data-marker-type="star6"
                                    data-marker-anchor="center">Star 4
                            </option>
                            <option data-icon="ac-star-5" data-annotation-type="marker" data-marker-type="star7"
                                    data-marker-anchor="center">Star 5
                            </option>
                            <option data-icon="ac-trapezium" data-annotation-type="marker"
                                    data-marker-type="trapezium"
                                    data-marker-anchor="center">Trapezium
                            </option>
                            <option data-icon="ac-triangle-up" data-annotation-type="marker"
                                    data-marker-type="triangle-up"
                                    data-marker-anchor="center-top">Triangle Up
                            </option>
                            <option data-icon="ac-triangle-down" data-annotation-type="marker"
                                    data-marker-type="triangle-down"
                                    data-marker-anchor="center-bottom">Triangle Down
                            </option>
                            <option data-icon="ac-triangle-left" data-annotation-type="marker"
                                    data-marker-type="triangle-left"
                                    data-marker-anchor="left-center">Triangle Left
                            </option>
                            <option data-icon="ac-triangle-right" data-annotation-type="marker"
                                    data-marker-type="triangle-right"
                                    data-marker-anchor="right-center">Triangle Right
                            </option>
                        </select>
​
                        <button type="button" class="btn btn-default volume-btn" data-el-size="marker" data-volume="20"
                                data-toggle="popover">Marker size
                        </button>
​
                    </div>
                </div>
                <div class="btn-group-container">
                    <div class="btn-group">
                        <button data-annotation-type="label" type="button" class="btn btn-default"
                                aria-label="Center Align"
                                data-toggle="tooltip" title="Label">
                            <i class="ac ac-font"></i>
                        </button>
​
                        <button type="button" class="btn btn-default" id="annotation-label-autosize"
                                aria-label="Auto-resize" data-toggle="tooltip" title="Auto-resize">
                            <i class="ac ac-enlarge" aria-hidden="true"></i>
                        </button>
​
                        <button type="button" class="btn btn-default color-picker" data-color="fontColor"
                                data-toggle="tooltip"
                                title="Сhoose font color"><span
                                class="color-fill-icon dropdown-color-fill-icon" data-color="black"></span>&nbsp;<b
                                class="caret"></b>
                        </button>
​
                        <button type="button" class="btn btn-default volume-btn" data-el-size="label" data-volume="15"
                                data-toggle="popover">Font size
                        </button>
​
                        <select class="selectpicker" id="select-font-style"
                                title="Font settings"
                                data-style="btn-lg" data-width="121" multiple>
                            <optgroup label="Font style" data-max-options="2">
                                <option data-icon="ac-italic" data-label-method="fontStyle" value="italic">Italic
                                </option>
                                <option data-icon="ac-bold" data-label-method="fontWeight" value="bold">Bold</option>
                            </optgroup>
                            <optgroup label="Font decoration" data-max-options="1" data-label-method="fontDecoration">
                                <option data-icon="ac-strikethrough" value="line-through">Line-through</option>
                                <option data-icon="ac-overline" value="overline">Overline</option>
                                <option data-icon="ac-underline" value="underline">Underline</option>
                            </optgroup>
                            <optgroup label="Horizontal align" data-max-options="1" data-label-method="hAlign">
                                <option data-icon="ac-align-center" value="center">Center</option>
                                <option data-icon="ac-align-left" value="left">Left</option>
                                <option data-icon="ac-align-right" value="right">Right</option>
                                <option data-icon="ac-position-left" value="start">Start</option>
                                <option data-icon="ac-position-right" value="end">End</option>
                            </optgroup>
                            <optgroup label="Anchor" data-max-options="1" data-label-method="anchor">
                                <option data-icon="ac-anc-cb" value="center-bottom">Center bottom</option>
                                <option data-icon="ac-anc-ct" value="center-top">Center top</option>
                                <option data-icon="ac-anc-lb" value="left-bottom">Left bottom</option>
                                <option data-icon="ac-anc-lc" value="left-center">Left center</option>
                                <option data-icon="ac-anc-lt" value="left-top">Left top</option>
                                <option data-icon="ac-anc-rb" value="right-bottom">Right bottom</option>
                                <option data-icon="ac-anc-rc" value="right-center">Right center</option>
                                <option data-icon="ac-anc-rt" value="right-top">Right top</option>
                                <option data-icon="ac-anc-c" value="center">Center</option>
                            </optgroup>
                            <optgroup label="Vertical align" data-max-options="1" data-label-method="vAlign">
                                <option data-icon="ac-position-top" value="top">Top</option>
                                <option data-icon="ac-position-center2" value="middle">Middle</option>
                                <option data-icon="ac-position-bottom" value="bottom">Bottom</option>
                            </optgroup>
                        </select>
​
                    </div>
                </div>
                <div class="btn-group-container">
                    <div class="btn-group">
                        <button data-action-type="removeSelectedAnnotation" type="button" class="btn btn-default"
                                aria-label="Center Align" data-toggle="tooltip" title="Delete selected drawing">
                            <i class="ac ac-remove-thin" aria-hidden="true"></i>
                        </button>
                        <button data-action-type="removeAllAnnotations" type="button" class="btn btn-default"
                                aria-label="Center Align" data-toggle="tooltip" title="Delete all drawings">Remove All
                        </button>
​
                        <select name="" id="seriesTypeSelect" class="select show-tick">
                            <!--series constructors-->
                            <option value="area">Area Chart</option>
                            <option value="candlestick">Candlestick Chart</option>
                            <option value="column">Column Chart</option>
                            <option value="jumpLine">Jump Line Chart</option>
                            <option value="line" selected>Line Chart</option>
                            <option value="marker">Marker Chart</option>
                            <option value="ohlc">OHLC Chart</option>
                            <option value="rangeArea">Range Area Chart</option>
                            <option value="rangeColumn">Range Column Chart</option>
                            <option value="rangeSplineArea">Range Spline Area Chart</option>
                            <option value="rangeStepArea">Range Step Area Chart</option>
                            <option value="spline">Spline Chart</option>
                            <option value="splineArea">Spline Area Chart</option>
                            <option value="stepArea">Step Area Chart</option>
                            <option value="stepLine">Step Line Chart</option>
                            <option value="stick">Stick Chart</option>
                            <!---->
                        </select>
​
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td class="chart-column">
            <div id="chart-container" style="height: 350px;"></div>
        </td>
    </tr>
</table>

CSScopy

 
body {
    padding: 10px 15px;
}
​
html, body {
    height: 100%;
}
​
.color-fill-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #000;
    background-color: #fff;
    margin: 2px;
}
​
.colorpickerplus-custom-colors,
.colorpickerplus .input-group {
    display: none;
}
​
.dropdown-color-fill-icon {
    position: relative;
    float: left;
    margin-left: 0;
    margin-right: 0
}
​
.title-drawing-tools {
    display: none;
}
​
.text-drawing-tools {
    display: none;
    max-width: 1080px;
    margin-bottom: 20px;
}
​
#chart-container {
    height: 100%;
}
​
#annotation-label {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
​
.table-container {
    padding: 0;
    width: 100%;
    height: 100%;
}
​
.table-container td {
    vertical-align: top;
}
​
.chart-column {
    height: 100%;
}
​
.no-iframe #chart-container {
    width: 99%;
}
​
.container-drawing-tools #chart-container {
    margin-top: 0;
}
​
.drawing-tools-solo.container {
    margin-top: 25px;
}
​
.container-drawing-tools .drawing-tools-solo {
    margin: 0;
}
​
* {
    outline: none !important;
}
​
.select > .btn {
    font-weight: 400;
    border-color: #c5c8d1;
    background: #fff;
}
​
.bootstrap-select > .btn {
    width: 100%;
    padding-right: 25px;
}
​
.error .bootstrap-select .btn {
    border: 1px solid #b94a48;
}
​
.control-group.error .bootstrap-select .dropdown-toggle {
    border-color: #b94a48;
}
​
.bootstrap-select.fit-width {
    width: auto !important;
}
​
.bootstrap-select.form-control {
    margin-bottom: 0;
    padding: 0;
}
​
.bootstrap-select .dropdown-toggle {
    height: 34px;
    padding: 8px 16px;
    font-weight: 400;
    border-color: #c5c8d1;
    background: #fff;
}
​
.filter-option {
    font-size: 14px;
    float: left;
}
​
.btn-group-container {
    display: inline-block;
}
​
.toolbar > .select-container {
    display: inline-block;
}
​
.select .ac {
    margin-right: 5px;
    top: -1px;
}
​
.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
    outline-offset: 0 !important;
}
​
.btn-group-vertical > .btn,
.btn-group > .btn {
    margin-left: -1px;
}
​
.bootstrap-select.btn-group:not(.input-group-btn),
.bootstrap-select.btn-group[class*=col-] {
    margin-left: -1px;
}
​
.btn-group .select.select-marker-size {
    margin-left: -5px !important;
}
​
.btn-group .select {
    margin-left: -1px !important;
}
​
.select-marker-size[disabled="disabled"] > .btn:first-child {
    opacity: 0.75;
    cursor: not-allowed;
}
​
.select-marker-size[disabled="disabled"] .btn.active,
.select-marker-size[disabled="disabled"]  .btn:active {
    -webkit-box-shadow: none;
    box-shadow: none;
}
​
.choose-drawing-tools.bootstrap-select.btn-group ul.dropdown-menu {
    margin-right: 10px;
}
​
.choose-marker.bootstrap-select.btn-group ul.dropdown-menu {
    margin-right: 10px;
}
​
.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    text-overflow: ellipsis;
}
​
.btn-group .btn {
    margin-bottom: 5px;
}
​
.btn-group .volume-btn {
    display: inline-block;
    float: none;
}
​
.btn-group {
    font-size: 0;
}
​
.ac.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}
​
button.dropdown-toggle {
    padding-left: 13px !important;
    padding-right: 25px !important;
}
​
.filter-option .ac,
.dropdown-menu .ac {
    font-size: 14px;
}
​
/*Loader------------------------------------------------------------------------------------------------------------------------------------*/
.anychart-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #fff;
}
​
.anychart-loader .rotating-cover {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 50%;
    margin-top: -35px;
    left: 50%;
    margin-left: -35px;
}
​
.anychart-loader .rotating-plane {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20%;
    border: 5px solid #1c75ba;
    margin: 0 auto;
    position: relative;
    -webkit-animation: rotateplane 3s infinite;
    animation: rotateplane 3s infinite;
}
​
.anychart-loader .chart-row {
    position: absolute;
    top: 10px;
    bottom: 0;
    left: 10px;
    right: 10px;
    letter-spacing: -3px;
    line-height: 0;
    font-size: 0;
    white-space: nowrap;
}
​
.anychart-loader .chart-row .chart-col {
    display: inline-block;
    width: 25%;
    height: 90%;
    background: #000;
    margin: 0 12.5% 0 0;
    vertical-align: bottom;
}
​
.anychart-loader .chart-row .chart-col.green {
    background: #26a957;
    height: 50%;
    -webkit-animation: blinkplane 1.5s infinite;
    animation: blinkplane 1.5s infinite;
}
​
.anychart-loader .chart-row .chart-col.orange {
    background: #ff8207;
    height: 70%;
    -webkit-animation: blinkplane 1.5s infinite 0.15s;
    animation: blinkplane 1.5s infinite 0.25s;
​
}
​
.anychart-loader .chart-row .chart-col.red {
    background: #f0402e;
    height: 90%;
    -webkit-animation: blinkplane 1.5s infinite 0.3s;
    animation: blinkplane 1.5s infinite 0.5s;
}
​
@keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        opacity: 1;
    }
    25% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        opacity: 0.3;
    }
    50% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        opacity: 1;
    }
    75% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(-180.1deg);
        transform: perspective(120px) rotateX(0deg) rotateY(-180.1deg);
        opacity: 0.3;
    }
    100% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        opacity: 1;
    }
}
​
@keyframes blinkplane {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.01;
    }
    100% {
        opacity: 1;
    }
}
​

JavaScriptAutocompletecopy

 
(function () {
    initTooltip('bottom');
​
    var chart;
    var $strokeSettings = $('#select-stroke-settings');
    var $colorPickerFill = $('.color-picker[data-color="fill"]');
    var $colorPickerStroke = $('.color-picker[data-color="stroke"]');
    var $annotationLabel;
    // var $markerSize = $('#select-marker-size');
    var $markerSize = $('.volume-btn[data-el-size="marker"]');
    var $fontSize = $('.volume-btn[data-el-size="label"]');
    var $markerSizeBtn = $('.select-marker-size');
    var $fontSettings = $('#select-font-style');
​
    var $labelMethod = $('[data-label-method]');
​
    $(function () {
        // page UI elements
        createPageColorPicker();
​
        // init selectpicker
        $('.selectpicker').selectpicker({
            iconBase: 'ac',
            tickIcon: 'ac-check'
        });
​
        // init volume bars
        // marker-size, font-size
        initVolumeBar();
​
        // data from https://cdn.anychart.com/csv-data/msft-daily-short.js
        var data = get_msft_daily_short_data();
​
        // Create new chart object.
        chart = anychart.stock();
​
        // create data table
        var table = anychart.data.table(0);
        table.addData(data);
​
        // create data mappings
        var mapping = table.mapAs({'value': 4});
​
        // create line series
        chart.plot(0).line(mapping)
            .stroke('2 #253992')
            .name('MSFT');
​
        // create ema indicator
        chart.plot(0).ema(mapping, 50, 'spline')
            .series()
            .stroke('#DB2A0E');
​
        // create scroller series
        chart.scroller().area(mapping)
            .color('#253992 0.3')
            .stroke('#253992');
​
        // set grid and axis settings
        chart.plot(0).yAxis(0).orientation('right');
        chart.plot(0).yAxis(1)
            .orientation('left')
            .ticks(false)
            .labels(false)
            .minorLabels(false);
        chart.plot()
            .xGrid(true)
            .yGrid(true);
​
        // set chart padding
        chart.padding()
            .right(35)
            .left(5)
            .top(10);
​
        // add annotation items in context menu
        chart.contextMenu().itemsFormatter(contextMenuItemsFormatter);
​
        // use annotation events to update application UI elements
        chart.listen('annotationDrawingFinish', onAnnotationDrawingFinish);
        chart.listen('annotationSelect', onAnnotationSelect);
        chart.listen('annotationUnSelect', function () {
            $colorPickerFill.removeAttr('disabled');
            // $markerSizeBtn.removeAttr('disabled');
            $('.drawing-tools-solo').find('.bootstrap-select').each(function () {
                $(this).removeClass('open');
            })
        });
        chart.listen('chartDraw', function () {
            hidePreloader();
​
            var $body = $('body');
            var $textArea = '<textarea id="annotation-label"></textarea>';
​
            if (!$body.find('#annotation-label').length) {
                $body.find('[data-annotation-type="label"]').length ?
                    $body.find('[data-annotation-type="label"]').after($textArea) :
                    $body.append($textArea);
                $annotationLabel = $('#annotation-label');
            }
        });
​
        // add textarea for label annotation and listen events
        chart.listen('annotationDrawingFinish', function (e) {
            if (e.annotation.type === 'label') {
​
                $annotationLabel.val(e.annotation.text())
                    .focus()
                    .on('change keyup paste', function (e) {
                        if (e.keyCode === 46) return;
​
                        try {
                            var annotation = chart.annotations().getSelectedAnnotation();
                            annotation.enabled();
                        } catch (err) {
                            annotation = null;
                        }
​
                        if (annotation) {
                            $(this).val() ? annotation.text($(this).val()) : annotation.text(' ') && $(this).val(' ');
                        }
                    });
​
                chart.listen('annotationDrawingFinish', function (e) {
                    if (e.annotation.type === 'label') {
                        $annotationLabel.val(e.annotation.text())
                            .focus();
                    }
                });
​
                chart.listen('annotationSelect', function (e) {
                    if (e.annotation.type === 'label') {
                        $annotationLabel.val(e.annotation.text())
                            .focus();
                    }
                });
​
                chart.listen('annotationUnselect', function () {
                    if (e.annotation.type === 'label') {
                        $annotationLabel.val('');
                    }
                });
            }
        });
​
        // set container id for the chart
        chart.container('chart-container');
​
        // initiate chart drawing
        chart.draw();
    });
​
    function initVolumeBar() {
        $('.volume-btn').on('mouseenter', function () {
            var self = this;
​
            $(this).popover({
                placement: 'bottom',
                html: true,
                trigger: 'manual',
                content: function () {
                    return '<div id="volume-popover">\n' +
                        '     <div class="volume-bar-value text-center">' + $(this).attr('data-volume') + 'px' +
                        '     </div>\n' +
                        '     <input type="range" id="volume-bar" class="volume-bar" step="1" value="' + $(this).attr('data-volume') + '"' +
                        '      min="5" max="35">\n' +
                        '   </div>'
                }
            });
​
            $(this).popover('show');
​
            $(this).siblings('.popover').on('mouseleave', function () {
                setTimeout(function () {
                    if (!$('.popover:hover').length) {
                        $(self).popover('hide')
                    }
                }, 100);
            });
        }).on('mouseleave', function () {
            var self = this;
​
            setTimeout(function () {
                if (!$('.popover:hover').length) {
                    $(self).popover('hide')
                }
            }, 100);
        });
    }
​
    function createPageColorPicker() {
        var colorPicker = $('.color-picker');
        var strokeWidth;
        var STROKE_WIDTH = 1;
        colorPicker.colorpicker({
            'color': '#e06666',
            'align': 'left'
        });
​
        colorPicker.on('create', function () {
            var color = $(this).data('color');
​
            if ($(this).find('.color-fill-icon[data-color]').length) {
                color = $(this).find('.color-fill-icon').attr('data-color');
            }
​
            $('.color-fill-icon', $(this)).css('background-color', color);
        });
​
        colorPicker.on('showPicker', function () {
            $(this).parent('div').find('.tooltip.in').tooltip('hide');
        });
​
        colorPicker.on('changeColor', function () {
            var color = $(this).data('color');
            var annotation = chart.annotations().getSelectedAnnotation();
            var _annotation = annotation;
​
            if (annotation) {
                if (annotation.type === 'label') {
                    $annotationLabel.focus();
                    annotation = annotation.background();
                }
​
                switch ($(this).attr('data-color')) {
                    case 'fill' :
                        annotation.fill(color);
                        break;
                    case 'stroke' :
                        strokeWidth = annotation.stroke().thickness || STROKE_WIDTH;
                        strokeDash = annotation.stroke().dash || '';
                        var settings = {
                            thickness: strokeWidth,
                            color: color,
                            dash: strokeDash
                        };
​
                        setAnnotationStrokeSettings(annotation, settings);
                        break;
                    case 'fontColor':
                        if (_annotation.type === 'label') _annotation.fontColor(color);
                        break;
                }
            }
​
            if (color === null) {
                $('.color-fill-icon', $(this)).addClass('colorpicker-color');
            } else {
                $('.color-fill-icon', $(this)).removeClass('colorpicker-color')
                    .css('background-color', color);
            }
        });
    }
​
    function removeSelectedAnnotation() {
        var annotation = chart.annotations().getSelectedAnnotation();
        if (annotation) chart.annotations().removeAnnotation(annotation);
​
        return !!annotation;
    }
​
    function removeAllAnnotation() {
        chart.annotations().removeAllAnnotations();
    }
​
    function onAnnotationDrawingFinish() {
        setToolbarButtonActive(null);
    }
​
    function onAnnotationSelect(evt) {
        var annotation = evt.annotation;
        var colorFill;
        var colorStroke;
        var strokeWidth;
        var strokeDash;
        var strokeType;
        var markerSize;
        var fontColor;
        var fontSize;
​
        var $colorPickerFontColor = $('.color-picker[data-color="fontColor"]');
​
        var fontSettings = [];
​
        if (annotation.fill || annotation.background) {
            $colorPickerFill.removeAttr('disabled');
            colorFill = annotation.fill ? annotation.fill() : annotation.background().fill();
            colorStroke = annotation.stroke ? annotation.stroke() : annotation.background().stroke();
        } else {
            $colorPickerFill.attr('disabled', 'disabled');
        }
​
        if (annotation.type === 'label') {
            $annotationLabel.focus();
​
            fontSize = annotation.fontSize();
​
            $fontSize.attr('data-volume', fontSize);
​
            fontColor = annotation.fontColor();
​
            fontSettings = [];
​
            $labelMethod.each(function () {
                var method = $(this).data().labelMethod;
​
                fontSettings.push(annotation[method]());
            });
​
            // update font settings select
            $fontSettings.val(fontSettings).selectpicker('refresh');
​
            annotation = annotation.background();
        }
​
        if (annotation.fill && typeof annotation.fill() === 'function') {
            colorFill = $colorPickerFill.find('.color-fill-icon').css('background-color');
        }
​
        if (colorStroke !== 'none') {
            colorStroke = annotation.stroke().color;
            strokeWidth = annotation.stroke().thickness;
            strokeDash = annotation.stroke().dash;
        }
​
        if (annotation.type === 'marker') {
            markerSize = annotation.size();
            $markerSize.attr('data-volume', markerSize);
        } else {
            $markerSizeBtn.attr('disabled', 'disabled');
        }
​
        if (annotation.fill !== undefined) {
            annotation.fill(colorFill);
        }
​
        if (fontSize) {
            evt.annotation.fontSize(fontSize);
        }
​
        switch (strokeDash) {
            case '1 1' :
                strokeType = 7;
                break;
            case '10 5' :
                strokeType = 8;
                break;
            default :
                if (strokeWidth) {
                    strokeType = 6;
                }
                break;
        }
​
        $colorPickerFill.find('.color-fill-icon').css('background-color', colorFill);
        $colorPickerStroke.find('.color-fill-icon').css('background-color', colorStroke);
        $colorPickerFontColor.find('.color-fill-icon').css('background-color', fontColor);
        $strokeSettings.val([strokeWidth, strokeType]).selectpicker('refresh');
    }
​
    function contextMenuItemsFormatter(items) {
        // insert context menu item on 0 position
        items['annotations-remove-selected'] = {
            text: "Remove selected annotation",
            action: removeSelectedAnnotation,
            index: -10
        };
​
        // insert context menu item on 1 position
        items['annotations-remove-all'] = {
            text: "Remove all annotations",
            action: removeAllAnnotation,
            index: -5
        };
​
        // insert context menu separator
        items['annotations-separator'] = {
            index: -4
        };
​
        return items;
    }
​
    function setToolbarButtonActive(type, markerType) {
        var $buttons = $('.btn[data-annotation-type]');
        $buttons.removeClass('active');
        $buttons.blur();
​
        if (type) {
            var selector = '.btn[data-annotation-type="' + type + '"]';
            if (markerType) selector += '[data-marker-type="' + markerType + '"]';
            $(selector).addClass('active');
        }
    }
​
    function updatePropertiesBySelectedAnnotation(colorStroke, strokeWidth, strokeType) {
        var annotation = chart.annotations().getSelectedAnnotation();
        if (annotation === null) return;
​
        if (annotation.type === 'label') {
            $annotationLabel.focus();
            annotation = annotation.background();
        }
​
        switch (strokeType) {
            case '6' :
                strokeType = null;
                break;
            case '7' :
                strokeType = '1 1';
                break;
            case '8' :
                strokeType = '10 5';
                break;
        }
​
        var settings = {
            thickness: strokeWidth,
            color: colorStroke,
            dash: strokeType
        };
​
        setAnnotationStrokeSettings(annotation, settings);
    }
​
    function setAnnotationStrokeSettings(annotation, settings) {
        annotation.stroke(settings);
        if (annotation.hovered || annotation.selected) {
            annotation.hovered().stroke(settings);
            annotation.selected().stroke(settings);
        }
    }
​
    function hidePreloader() {
        $('#loader-wrapper').fadeOut('slow');
    }
​
    function initTooltip(position) {
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip({
                'placement': position,
                'animation': false
            }).on('show.bs.tooltip', function () {
                if ($(this).hasClass('color-picker') && $('.colorpicker-visible').length) {
                    return false
                }
            })
        });
    }
​
    function normalizeFontSettings(val) {
        var fontMethods = {};
​
        $labelMethod.each(function () {
            fontMethods[$(this).data().labelMethod] = null;
        });
​
        val && val.forEach(function (item) {
            if (item) {
                $fontSettings.find('[data-label-method]').each(function () {
                    var $that = $(this);
                    var $el = $(this).find('option').length ? $(this).find('option') : $(this);
​
                    $el.each(function () {
                        if ($(this).val() === item) {
                            fontMethods[$that.attr('data-label-method')] = item;
                        }
                    });
                });
            }
        });
​
        return fontMethods
    }
​
    $(document).ready(function () {
            $('select.choose-drawing-tools').on('change', changeAnnotations);
            $('select.choose-marker').on('change', changeAnnotations);
            $('[data-annotation-type]').on('click', changeAnnotations);
​
            $('#annotation-label-autosize').on('click', function () {
                var annotation = chart.annotations().getSelectedAnnotation();
​
                if (annotation && annotation.type === 'label') {
                    annotation.width(null);
                    annotation.height(null);
                }
​
                setToolbarButtonActive(null);
​
                $annotationLabel.focus();
            });
​
            function changeAnnotations() {
                var $that = $(this);
​
                setTimeout(function () {
                    var $target = $that;
                    var active = $target.hasClass('active');
                    var markerSize = $markerSize.attr('data-volume');
                    var fontSize = $fontSize.attr('data-volume');
                    var fontColor = $('[data-color="fontColor"]').find('.color-fill-icon').css('background-color');
​
                    var colorFill = $colorPickerFill.find('.color-fill-icon').css('background-color');
                    var colorStroke = $colorPickerStroke.find('.color-fill-icon').css('background-color');
​
                    var strokeType;
                    var strokeWidth;
                    var strokeDash;
                    var STROKE_WIDTH = 1;
​
                    if ($strokeSettings.val()) {
                        switch ($strokeSettings.val()[0]) {
                            case '6' :
                            case '7' :
                            case '8' :
                                strokeType = $strokeSettings.val()[0];
                                strokeWidth = $strokeSettings.val()[1] || STROKE_WIDTH;
                                break;
                            default :
                                strokeWidth = $strokeSettings.val()[0];
                                strokeType = $strokeSettings.val()[1];
                                break;
                        }
                    }
​
                    switch (strokeType) {
                        case '6' :
                            strokeDash = null;
                            break;
                        case '7' :
                            strokeDash = '1 1';
                            break;
                        case '8' :
                            strokeDash = '10 5';
                            break;
                    }
​
                    var strokeSettings = {
                        thickness: strokeWidth,
                        color: colorStroke,
                        dash: strokeDash
                    };
​
                    var fontSettings = normalizeFontSettings($fontSettings.val());
​
                    if (active) {
                        chart.annotations().cancelDrawing();
                        setToolbarButtonActive(null);
                    } else {
                        var type = $target.data().annotationType || $target.find('option:selected').data().annotationType;
​
                        if (!$target.data().annotationType) {
                            var markerType = $target.find('option:selected').data().markerType;
                        }
​
                        setToolbarButtonActive(type, markerType);
​
                        if (type) {
​
                            if (!$target.data().annotationType) {
                                var markerAnchor = $target.find('option:selected').data().markerAnchor;
                            }
​
                            var drawingSettings = {
                                type: type,
                                size: markerSize,
                                markerType: markerType,
                                anchor: markerAnchor,
                                fontSize: fontSize,
                                fontColor: fontColor
                            };
​
                            $.extend(drawingSettings, fontSettings);
​
                            if (type === 'label') {
                                drawingSettings.anchor = fontSettings.anchor;
​
                                drawingSettings.background = {
                                    fill: colorFill,
                                    stroke: strokeSettings
                                };
                                drawingSettings.hovered = {
                                    background: {
                                        stroke: strokeSettings
                                    }
                                };
                                drawingSettings.selected = {
                                    background: {
                                        stroke: strokeSettings
                                    }
                                };
                            } else {
                                drawingSettings.fill = colorFill;
                                drawingSettings.stroke = strokeSettings;
                                drawingSettings.hovered = {
                                    stroke: strokeSettings
                                };
                                drawingSettings.selected = {
                                    stroke: strokeSettings
                                };
                            }
​
                            chart.annotations().startDrawing(drawingSettings);
                        }
                    }
​
                    var annotation = chart.annotations().getSelectedAnnotation();
​
                    if (annotation.fill || annotation.background) {
                        $colorPickerFill.removeAttr('disabled');
                    } else {
                        $colorPickerFill.attr('disabled', 'disabled');
                    }
​
                    $target.val('');
                }, 1);
            }
​
            $('.btn[data-action-type]').click(function (evt) {
                var annotation = chart.annotations().getSelectedAnnotation();
                var $target = $(evt.currentTarget);
                $target.blur();
                var type = $target.attr('data-action-type');
​
                switch (type) {
                    case 'removeAllAnnotations':
                        removeAllAnnotation();
                        break;
                    case 'removeSelectedAnnotation' :
                        removeSelectedAnnotation();
                        break;
                    case 'unSelectedAnnotation' :
                        chart.annotations().unselect(annotation).cancelDrawing();
                        setToolbarButtonActive(null);
                        break;
                }
​
            });
​
            $strokeSettings.on('change', function () {
                var strokeWidth;
                var strokeType;
                var STROKE_WIDTH = 1;
                var colorStroke = $colorPickerStroke.find('.color-fill-icon').css('background-color');
​
                if ($(this).val()) {
                    switch ($(this).val()[0]) {
                        case '6' :
                        case '7' :
                        case '8' :
                            strokeType = $(this).val()[0];
                            strokeWidth = $(this).val()[1] || STROKE_WIDTH;
                            break;
                        default :
                            strokeType = $(this).val()[1];
                            strokeWidth = $(this).val()[0];
                            break;
                    }
​
                    updatePropertiesBySelectedAnnotation(colorStroke, strokeWidth, strokeType);
                }
            });
​
            $markerSize.on('change', function () {
                var annotation = chart.annotations().getSelectedAnnotation();
​
                if (annotation && annotation.type === 'marker') {
                    annotation.size($(this).val());
                }
            });
​
            $('body').on('change', '.volume-bar', function () {
                var annotation = chart.annotations().getSelectedAnnotation();
​
                var $popover = $(this).closest('.popover');
​
                $popover.prev('.volume-btn')
                    .attr('data-volume', $(this).val());
​
                $popover.find('.volume-bar-value').text($(this).val() + 'px');
​
                if (annotation && annotation.type === 'label' &&
                    $popover.prev('.volume-btn').attr('data-el-size') === 'label') {
                    annotation.fontSize($(this).val());
                    $annotationLabel.focus();
                } else if (annotation && annotation.type === 'marker' &&
                    $popover.prev('.volume-btn').attr('data-el-size') === 'marker') {
                    annotation.size($(this).val());
                }
            });
​
            $fontSettings.on('change', function () {
                var annotation = chart.annotations().getSelectedAnnotation();
​
                if (annotation && annotation.type === 'label') {
​
                    var fontSettings = normalizeFontSettings($(this).val());
​
                    $labelMethod.each(function () {
                        var method = $(this).data().labelMethod;
​
                        annotation[method](fontSettings[method]);
                    });
​
                    $annotationLabel.focus();
                }
            });
​
            $('html').keyup(function (e) {
                if (e.keyCode === 46) {
                    removeSelectedAnnotation();
                }
            })
        }
    );
})();

Sample meta

AnyChart Documentation

Pyramid Chart (Basic Charts)

ASYNC Rendering (Common Settings)

Drawing (Drawing Tools and Annotations)

Range Selection (Stock Charts)

Scales (Axes and Grids)

Statistics (Common Settings)