Highcharts arearange draggableHigh and draggableLow not working

Question

According to the documentation, series.arearange.dragDrop should accept draggableHigh and draggableLow (both defaulting to true) to allow the high and low points of the range to be dragged individually. In other words, not only moving the range up or down, but also making it narrower or wider. But I can't get it to work. Code:

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts";
import more from "highcharts/highcharts-more";
import draggable from "highcharts/modules/draggable-points";

import HighchartsReact from "highcharts-react-official";

if (typeof Highcharts === "object") {
  more(Highcharts);
  draggable(Highcharts);
}

class App extends React.Component {
  render() {
    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          constructorType={"chart"}
          options={{
            credits: {
              enabled: false
            },
            title: {
              text: ""
            },
            tooltip: {
              valueDecimals: 2,
              shared: true
            },
            legend: {
              enabled: false
            },
            xAxis: {
              type: "datetime"
            },
            yAxis: {
              title: {
                text: ""
              },
              min: 0
            },
            series: [
              // …
              {
                name: "Range",
                data: [[0, 8, 3], [1, 1, 1], [2, 6, 8]],
                type: "arearange",
                dragDrop: {
                  draggableY: true,
                  draggableHigh: true,
                  draggableLow: true
                },
                lineWidth: 0,
                linkedTo: ":previous",
                color: "lightBlue",
                fillOpacity: 0.3,
                zIndex: 0,
                marker: {
                  enabled: false
                }
              }
            ]
          }}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Demo: https://codesandbox.io/s/highcharts-react-demo-u151p

Answer 1

You have incorrect data structure:

data: [
  [0, 8, 3],
  [1, 1, 1],
  [2, 6, 8]
]

is mapped to 'x', 'low', 'high' and low can not be greater than high.

You need to change the data order or use keys property.

Also, you need to enable the marker. Remove the following:

marker: {
  enabled: false
}

---

API Reference:

https://api.highcharts.com/highcharts/series.arearange.data

https://api.highcharts.com/highcharts/series.arearange.keys