score:5
Accepted answer
The best solution I could think of for this is to create a new "arearange" series which is between the two series and hide it from the legend.
Something like :
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},
{
type: "arearange",
data: [
[3.9, 7.0],
[4.2,6.9],
[5.7,9.5],
[8.5,14.5],
[11.9, 18.2 ],
[15.2, 21.5 ],
[17.0, 25.5 ],
[16.6, 26.5 ],
[14.2, 23.3 ],
[10.3, 18.3 ],
[6.6, 13.9],
[4.8, 9.6 ]
],
showInLegend: false
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
Example fiddle: http://jsfiddle.net/cs1zuzos/
Note: You'll need to use highcharts-more.js
to do this.
Source: stackoverflow.com
Related Query
- Highcharts highlight area between two lines
- Color area between two lines based on difference
- Highcharts - Area between two y values highlighted
- JavaScript charting library to handle shading area between two lines
- highlight area chart lines when crossed in highcharts
- Highcharts Pie Chart.How to set labels in two lines
- Highcharts not drawing lines between points
- How to fill the Area between two series with multiples yAxis in HighChart?
- Echarts how to highlight area between 2 line charts
- How to cut off the line in highcharts between two pointI
- Highcharts two series, each is stacked area
- Highlight area in highcharts
- Highcharts - gap between series in stacked area chart
- Highcharts - programmatically draw a line or graphic between two related points
- Highcharts AreaSpline - Adding padding in between the chart and plot area
- Add text to generated quadrant area by x and y plot lines , highcharts
- Highchart highlight area between points with custom colors
- Highcharts - How do I keep both line points in from splitting between the two bar charts
- Break highcharts legend items into two lines
- Highcharts - line between two categories
- Draw vertical line when two lines cross in Highcharts
- Show dividing lines between horizontal bars on highcharts graph
- Highcharts two colors for fill of area chart
- Adding space between the line and the fill in a Highcharts area chart
- Highcharts Interactivity between plots - looking for code improvements
- highcharts. How to shade the area between two vertical lines?
- Two synchronized vertical lines in highcharts
- How to add dotted lines between two interval of x-axis in hightcharts
- Highcharts - How can I show arrow between two dials of gauge chart?
- Reduce gap between plot area and actual chart in highcharts
More Query from same tag
- Highcharts error loading maps plugin
- Resize a chart before printing with Highcharts
- Highchart xAxis tick not starting at first data point
- HIghcharts - chart width not the size of the parent container
- can't get data-labels in highcharts-export-server on live server
- Reset yAxis Min and Max on drilldown
- Highcharts shared tooltip requires different valueSuffix and varying decimals
- Highcharts xAxis with datetime not showing any chart
- How to get hovered date in Highcharts spline?
- could not find function "hc_add_series_density" Highcharter R
- Highstock doesn't show all data in serie
- Display real time scale on xAxis
- Highcharts change crosshairs color by number of visible series
- Highcharts MTD (Month to Date) and QTD (Quater to Date) implementation
- How to insert HTML inside an Ext.each() in the labeFormatter function of legend-EXTJS -highcharts
- Highstock flags onSeries with addSeries
- How can I show only one x-axis in synchronous chart highchart
- Highchart export filename with special characters
- Highchart with external CSV (in external domain)
- Highcharts distance from crosshair to tooltip
- Highcharts populate the categories with live data from MySQL
- how to pass database values in Yii2 Highchart
- Highstock Navigator Displayed Twice
- How can I use getSVG() with react-highcharts?
- Pie Piece Too Small
- how to pass multi sereis data with dual y axis chart in highchart
- Highcharts - tickInterval not working for bar/column charts
- Can i show table on x-axis as like grouped categories in highcharts - But no grouping
- Caveats of highcharts-ng
- Alpha value of 3d chart's rotation ? where is the center?