Highcharts of type area range not displaying markers like circles

Question

I am trying to display markers on highchart of type Area-range and not able to do so.

jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/arearange/ chart with markers for series data

Answer 1

I don't think you can do this from a marker options point of view, as the Highcharts API doesn't include the marker for charts of type 'arearange'.

I think the only way you can do this is to plot the max and min values on your chart as lines overlaying the range, and link them together.

JSFiddle example here:

http://jsfiddle.net/8pm9rohu/1/

I tried with your original example (based on a provided dataset) but it was way too big a dataset to look good with markers plotted on the chart.

In the unlikely event that you will be getting a predefined data array like this, and not constructing it yourself, you can just loop through the data and extract the min and max values into arrays of their own to plot as lines on the chart.

I.e. (given that 'ranges' is the dataset provided):

var maxArray = [];
var minArray = [];
var dataArrayLength = ranges.length;
for (var i = 0; i < dataArrayLength; i++) {
    minArray[i] = [ranges[i][0], ranges[i][1]];
    maxArray[i] = [ranges[i][0], ranges[i][2]];
}

Hopefully though, you will be creating this dataset yourself and you'll be able to create the min and max arrays of data in the same function as creating the range array, and pass these extra arrays to the chart.

P.S. Remember to make sure your min and max series use the same patterns (i.e. marker type, colours, etc)! Otherwise it'll look silly...

series: [{
        name: 'Max',
        showInLegend: false, 
        data: maxArray,
        zIndex: 1,
        color: Highcharts.getOptions().colors[0],
        marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[0],
            symbol: 'circle'
        }
    }, {
        name: 'Min',
        showInLegend: false, 
        data: minArray,
        zIndex: 1,
        color: Highcharts.getOptions().colors[0],
        marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[0],
            symbol: 'circle'
        }
    }, {
        name: 'Range',
        data: ranges,
        type: 'arearange',
        lineWidth: 0,
        linkedTo: ':previous',
        color: Highcharts.getOptions().colors[0],
        fillOpacity: 0.3,
        zIndex: 0
    }]