areaspline showing every other category
nv atlas
by Nelu Malancea
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 200px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline',
backgroundColor: '#faf9f6',
marginRight: 3,
alignTicks: false
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
//categories: [0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100],
gridLineWidth: 1,
gridLineDashStyle: 'ShortDash',
gridLineColor: '#d2d2d2',
lineWidth: 0,
tickmarkPlacement: 'on',
tickLength: 3,
title: {
text: 'Percentile',
style: {
color: '#8C8F94',
textTransform: 'uppercase',
fontSize: '9px'
}
},
labels: {
y: 15,
style: {
color: '#8C8F94',
fontSize: '9px'
}
},
},
yAxis: {
title: {
text: 'Unit Price',
style: {
color: '#8C8F94',
textTransform: 'uppercase',
fontSize: '9px'
}
},
labels: {
x: 0,
style: {
color: '#8C8F94',
fontSize: '9px'
}
},
gridLineWidth: 0,
min: 55,
max: 65.5
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1,...