I've been unable to find documentation that would let me combine the look of these two charts:
Irregular Time Chart
Line/Time Chart with Gradient Fill
I'm attempting to put a gradient fill under each of 3 lines in an irregular time chart.
Here's as far as I got: /
Any help would be appreciated!
I've been unable to find documentation that would let me combine the look of these two charts:
Irregular Time Chart
Line/Time Chart with Gradient Fill
I'm attempting to put a gradient fill under each of 3 lines in an irregular time chart.
Here's as far as I got: http://jsfiddle.net/WNDUH/
Any help would be appreciated!
Share Improve this question asked Apr 18, 2012 at 19:33 Jeremy PenrodJeremy Penrod 3311 gold badge4 silver badges19 bronze badges1 Answer
Reset to default 16Try moving the area object into plotOptions then defining the type and fillColor of each series.
EDIT
http://jsfiddle.net/WNDUH/10/
JS:
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',
type : 'spline',
backgroundColor : {
linearGradient : [0, 0, 0, 400],
stops : [
[0, 'rgb(96, 96, 96)'],
[1, 'rgb(16, 16, 16)']
]
}
},
title : {
text : 'Snow depth in the Vikjafjellet mountain, Norway'
},
subtitle : {
text : 'An example of irregular time data in Highcharts JS'
},
xAxis : {
type : 'datetime',
dateTimeLabelFormats : { // don't display the dummy year
month : '%e. %b',
year : '%b'
}
},
yAxis : {
title : {
text : 'Snow depth (m)'
},
min : 0
},
tooltip : {
formatter : function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%e. %b', this.x) + ': ' + this.y + ' m';
}
},
plotOptions : {
area : {
lineWidth : 1,
marker : {
enabled : false,
states : {
hover : {
enabled : true,
radius : 5
}
}
},
shadow : false,
states : {
hover : {
lineWidth : 1
}
}
}
},
series : [{
name : 'Winter 2007-2008',
type : "area",
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(2,0,0,0)']
]
},
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data : [
[Date.UTC(1970, 9, 27), 0],
[Date.UTC(1970, 10, 10), 0.6],
[Date.UTC(1970, 10, 18), 0.7],
[Date.UTC(1970, 11, 2), 0.8],
[Date.UTC(1970, 11, 9), 0.6],
[Date.UTC(1970, 11, 16), 0.6],
[Date.UTC(1970, 11, 28), 0.67],
[Date.UTC(1971, 0, 1), 0.81],
[Date.UTC(1971, 0, 8), 0.78],
[Date.UTC(1971, 0, 12), 0.98],
[Date.UTC(1971, 0, 27), 1.84],
[Date.UTC(1971, 1, 10), 1.80],
[Date.UTC(1971, 1, 18), 1.80],
[Date.UTC(1971, 1, 24), 1.92],
[Date.UTC(1971, 2, 4), 2.49],
[Date.UTC(1971, 2, 11), 2.79],
[Date.UTC(1971, 2, 15), 2.73],
[Date.UTC(1971, 2, 25), 2.61],
[Date.UTC(1971, 3, 2), 2.76],
[Date.UTC(1971, 3, 6), 2.82],
[Date.UTC(1971, 3, 13), 2.8],
[Date.UTC(1971, 4, 3), 2.1],
[Date.UTC(1971, 4, 26), 1.1],
[Date.UTC(1971, 5, 9), 0.25],
[Date.UTC(1971, 5, 12), 0]
]
}, {
name : 'Winter 2008-2009',
type : "area",
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[1]],
[1, 'rgba(2,0,0,0)']
]
},
data : [
[Date.UTC(1970, 9, 18), 0],
[Date.UTC(1970, 9, 26), 0.2],
[Date.UTC(1970, 11, 1), 0.47],
[Date.UTC(1970, 11, 11), 0.55],
[Date.UTC(1970, 11, 25), 1.38],
[Date.UTC(1971, 0, 8), 1.38],
[Date.UTC(1971, 0, 15), 1.38],
[Date.UTC(1971, 1, 1), 1.38],
[Date.UTC(1971, 1, 8), 1.48],
[Date.UTC(1971, 1, 21), 1.5],
[Date.UTC(1971, 2, 12), 1.89],
[Date.UTC(1971, 2, 25), 2.0],
[Date.UTC(1971, 3, 4), 1.94],
[Date.UTC(1971, 3, 9), 1.91],
[Date.UTC(1971, 3, 13), 1.75],
[Date.UTC(1971, 3, 19), 1.6],
[Date.UTC(1971, 4, 25), 0.6],
[Date.UTC(1971, 4, 31), 0.35],
[Date.UTC(1971, 5, 7), 0]
]
}, {
name : 'Winter 2009-2010',
type : "area",
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[2]],
[1, 'rgba(2,0,0,0)']
]
},
data : [
[Date.UTC(1970, 9, 9), 0],
[Date.UTC(1970, 9, 14), 0.15],
[Date.UTC(1970, 10, 28), 0.35],
[Date.UTC(1970, 11, 12), 0.46],
[Date.UTC(1971, 0, 1), 0.59],
[Date.UTC(1971, 0, 24), 0.58],
[Date.UTC(1971, 1, 1), 0.62],
[Date.UTC(1971, 1, 7), 0.65],
[Date.UTC(1971, 1, 23), 0.77],
[Date.UTC(1971, 2, 8), 0.77],
[Date.UTC(1971, 2, 14), 0.79],
[Date.UTC(1971, 2, 24), 0.86],
[Date.UTC(1971, 3, 4), 0.8],
[Date.UTC(1971, 3, 18), 0.94],
[Date.UTC(1971, 3, 24), 0.9],
[Date.UTC(1971, 4, 16), 0.39],
[Date.UTC(1971, 4, 21), 0]
]
}
]
});
});
});
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>