score:1
Accepted answer
It's impossible to change in regular Highcharts API options, but making some changes in core code does the job.
At Highcharts.RangeSelector.prototype.render we need to switch sequence of triggering rangeSelector.drawInput functions:
if (inputEnabled !== false) {
rangeSelector.div = div = createElement('div', null, {
position: 'relative',
height: 0,
zIndex: inputsZIndex
});
container.parentNode.insertBefore(div, container);
// Create the group to keep the inputs
rangeSelector.inputGroup = inputGroup =
renderer.g('input-group').add(group);
inputGroup.offset = 0;
rangeSelector.drawInput('max');
rangeSelector.drawInput('min');
}
In Highcharts.RangeSelector.prototype.drawInput I made some styling/creating changes here:
// Create an SVG label that shows updated date ranges and and records
// click events that bring in the HTML input.
this[name + 'DateBox'] = dateBox = renderer.label('', inputGroup.offset)
.addClass('highcharts-range-input')
.attr({
padding: 2,
width: options.inputBoxWidth || 90,
height: options.inputBoxHeight || 17,
'text-align': 'center'
})
.on('click', function() {
// If it is already focused, the onfocus event doesn't fire
// (#3713)
rangeSelector.showInput(name);
rangeSelector[name + 'Input'].focus();
});
// Create the text label
this[name + 'Label'] = label = renderer.label(
lang[isMin ? 'rangeSelectorFrom' : 'rangeSelectorTo'],
this.inputGroup.offset
)
.addClass('highcharts-range-label')
.attr({
padding: 2,
paddingLeft: 100
})
.add(inputGroup);
inputGroup.offset += label.width - 85;
Source: stackoverflow.com
Related Query
- how can i change position of inputs in high charts high-stock?
- How can I put custom color in High Charts PIE data | Slice and want to change slice text
- How can get the position of line series in high stock chart
- How can we change legends position in Highcharts?
- How can I automate high charts and graphs using selenium webdriver?
- Highstock charts - change position of rangeselector From and To inputs
- How to change tool tip using High Charts
- how to display array of objects in High stock charts
- How add months as a x-axis to stock chart/ high charts
- High Charts PieChart How Can I show point value inside segment and label name outside
- How can I make a custom line type in high charts
- How can I change the colors of my highcharts piechart?
- How can I change the unit at y axis dynamically at Highcharts?
- How can I change the width of the bars in a highchart?
- change legend color high charts based on data
- Highcharts, How can I change the datalable distance in a pie chart based on the value
- How can i change highcharts data values by selecting from a dropdown list
- How to set the x value for High Charts error bar
- How can I change the scale of the legend in highcharter in R?
- How to generate multiple high charts in ng-repeat
- How to change the background color of measure tool in stock chart in highstock?
- How can i change convert "120 Lakhs" to "1 crore 20 Lakhs" in Highcharts
- Highcharts - Cross browser charts have different Y axis ranges, how can I ensure consistency?
- How can I change opacity of not hovered columns on highchart?
- How to add trend line to high charts
- How to display total of extra data in stacked column high charts
- how to dynamically change chart type in highstock stock chart?
- How can I change the color of legend points?
- How to show grid-lines when chart data is empty, in High Stock charts?
- Highcharts large treemap how can I dynamically change allowDrillToNode flag?
More Query from same tag
- Create Highcharts data label formatter that filters the data to display
- csv with dates in decimal format
- Trying to get highcharts export to work on app engine
- How to build a JSON data array for Highcharts display - switching values for xAxis/columns
- How can I custom draw each tile on treemap squarified chart
- Change from graph/Highcharts to maps/Highmaps in my API
- Highcharts combination of line chart and treemap
- Highstock : altered points?
- How to change HighChart xAxis timeline to match local time and not UTC?
- verticalAlign ignored for non 0 rotation
- Shows a single chart on Highcharts
- how to reduce the distance b/w the column contains 2 column graphs in highcharts
- Highcharts format json data from php script / unixtime
- How to reduce the area around a highcart?
- Hightchart map pie : clic and hide specific pie
- jQuery AJAX chart object reference passing?
- Highcharts - specifying order of stacked time series
- HighCharts Date Formatting
- Dynamic tooltip for Dynamic Highchart
- hchart Error in mutate_impl(.data, dots) : Column `x` is of unsupported type quoted call
- How do i add mouse wheel code in Angular2 highcharts in typescript
- Highcharts - Can it do this type of graph?
- Highcharts multiple data series
- How to show multiple HighCharts charts in the same page?
- Highcharts plotbands text should not overlap with columns
- Highstock : Shared tooltip except for one series
- High Charts - Set Solid Gauge Value from JSON
- vmware-clarity Type 'ElementRef' is not generic
- use jquery function in a highcharts
- Highcharts not displaying series data for graph with multiple Y-axes