Area range with plotly.js

Question

Is it possible to create a zone range graph with plotly.js similar to that of Highcharts (http://www.highcharts.com/demo/arearange-line). The example I find (https://plot.ly/alpha/workspace/?fid=AgManager:20) is not satisfactory in terms of processing the data series. I would rather have a series with a maximum and a minimum. Thanks

Maximilian Peters Maximilian Peters · Accepted Answer · 2016-11-16T22:35:03

You would need to add three arrays to your data: average, minimum and maximum. First plot the average, then min and max. Use fill: 'tonexty' to getting the shading.

var plotDiv = document.getElementById('plot');
var traces = [
    {name: 'avg', x: [1,2,3], y: [1,3,2], marker:{color: 'blue'}},
	{name: 'min', x: [1,2,3], y: [0.5,2,1], marker:{color: 'lightblue'}},
	{name: 'max', x: [1,2,3], y: [3,6,2.5], fill: 'tonexty', marker:{color: 'lightblue'}}
];


Plotly.newPlot(plotDiv, traces)

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='plot'>

</div>

Area range with plotly.js

1 Answers