The visualization in the image you shared may not align exactly with the chart, but you can achieve an inverted pyramid or funnel effect using a stacked area series.
For an illustration, refer to this example: http://jsfiddle.net/2e3uh4xy/
$(function() {
var dataset = [5, 9, 12, 8, 6],
dataPoints = [
[0, 100]
],
overPoints = [
[0, 0]
],
underPoints = [
[0, 0]
],
segments = [],
length = dataset.length,
colors = Highcharts.getOptions().colors,
maxColorIndex = colors.length,
index, value, total = 0,
position = 0;
for (index = 0; index < length; index++) {
total += dataset[index];
}
for (index = 0; index < length; index++) {
position += dataset[index];
value = (total - position) / total * 100;
dataPoints.push([position, value]);
overPoints.push([position, (100 - value) / 2]);
underPoints.push([position, (100 - value) / 2]);
segments.push({
value: position,
color: colors[index % maxColorIndex]
});
}
$('#graph-container').highcharts({
chart: {
type: 'area'
},
yAxis: {
title: {
text: 'Percentage'
}
},
plotOptions: {
area: {
enableMouseTracking: false,
showInLegend: false,
stacking: 'percent',
lineWidth: 0,
marker: {
enabled: false
}
}
},
series: [{
name: 'over',
color: 'none',
data: overPoints
}, {
id: 'data-series',
name: 'Data Series',
data: dataPoints,
showInLegend: true,
zoneAxis: 'x',
zones: segments
}, {
name: 'under',
color: 'none',
data: underPoints
}]
});
});
While your desired chart may not be an exact match in Highcharts, it is possible to adjust your data and settings to achieve a similar effect. Dotted lines, for example, can be implemented using line with a specified dash style.
See this example for reference: http://jsfiddle.net/2e3uh4xy/17/