scatter surface mockup
by kzoon
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width:800px;height: 600px"></div>JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter'
},
title: {
text: 'Surface chart'
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
yAxis: {
min: 0,
max: 100,
tickInterval: 20,
gridLineWidth: 0,
tickWidth: 1,
lineWidth: 1
},
xAxis: {
min: 0,
max: 100,
tickInterval: 20
},
tooltip: {
animation: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{x} - {y}',
align: 'right',
verticalAlign: 'top',
color: 'white',
x: -5
},
marker: {
symbol: 'circle' //,radius:0
}
}
},
series: [{
name: 'brand A',
color: '#2f7ed8',
zIndex: 20,
data: [{
x: 20,
y: 20,
marker: {
enabled: false
}
}]
}, {
color: '#0d233a',
name: 'brand B',
zIndex: 11,
data: [{
x: 40,
y: 70,
marker: {
enabled: false
}
}]
}, {
name: 'brand C',
color: '#8bbc21',
zIndex: 11,
data: [{
x: 80,
y: 70,
marker: {
enabled: false
}
}]
}, {
name: 'brand D',
color: '#910000',
zIndex: 11,
data: [{
x: 100,
...