score:1

Accepted answer

It's impossible to change in regular Highcharts API options, but making some changes in core code does the job.

jsFiddle demo

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;

Related Query

More Query from same tag