Columns of markers - highcharts

Question

I need to render following in highcharts:
What's the correct chart type to use?
Intuitively this seems like a column, but none of the examples are leading me in that direction. Instead, it seems as if I need a line chart without the lines.
Any suggestions would be greatly appreciated.

Answer 1

You can use a scatter series with an additional value displayed as a data label. Size of the marker is configurable with marker.radius option. Position of the markers can be adjust with point.x and point.y values and yAxis scale set with yAxis.min and yAxis.max
plotOptions: {
series: {
marker: {
radius: 20,
symbol: 'circle'
},
dataLabels: {
enabled: true,
x: 0, /* center a label inside the marker */
y: 0,
align: 'center',
verticalAlign: 'middle', /* end center */
format: '{point.z}', /* as a label value takes the additional z property defined in the data array */
style: {
textOutline: null,
fontSize: '18px'
}
}
}
},
Example of a series config:
{
keys: ['x', 'y', 'z'], /* x - pos on x axis, y - pos on y axis, z value displayed inside the marker
data: [
[1, 4, 6],
[2, 2, 4]
],
dataLabels: {
color: /* label color */
}
}
example: http://jsfiddle.net/u19jux99/
A similar result can be achieved with a bubble series with a constant bubble size (set by minSize = maxSize = constant). In this case labels are centered by default and they display z value.
plotOptions: {
series: {
maxSize: 35,
minSize: 35,
dataLabels: {
enabled: true,
style: {
textOutline: null,
fontSize: '18px'
}
}
}
},
example: http://jsfiddle.net/u19jux99/1/