CODEWITHSUNDEEP
javascripthighcharts
Channa
Channa

Reputation: 3757

Adding a custom drop down to highstock range selector menu

I want to add custom drop down button as following image to highchart. I tried adding custom button as in this fiddle, but it doesn't provide a way to add drop down above the chart. any one know a correct method.

    exporting: {
        buttons: {
            customButton: {
                x: -150,
                onclick: function () {
                    alert('Clicked');
                },
                symbol: 'circle'
            }
        }
    }

enter image description here

Upvotes: 1

Views: 1389

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can use HTML select with defined CSS styles, like position absolute and top/left. I mean using tag in html, which is placed absolutely.

HTML:

<div class="chart">
<select>
    <option>OHLC</option>
    <option>Candlestick</option>
</select>
<div id="container" style="height: 400px; width:750px;"></div>

CSS:

.chart {
position:relative;
}
.chart select {
    position:absolute;
    right:50%;
    top:45px;
    z-index:9999;
}

Example: http://jsfiddle.net/7v2bwv5u/2

Upvotes: 1

Related Questions