Avoid overlapping in highchart bubble chart

Question

I'm trying to represent a few series as a Bubble Chart, but I don't know how to represent the bubbles in different X positions when they belong to the same category. Let's take the following example

When the chart is represented in bars or columns, there is no overlapping, but when i choose bubbles, every bubble is drawn in the same position.

I want something like this:

How can I achieve this?? Here you can find the example:

chart: {
    type: 'bubble',
    plotBorderWidth: 1
},
xAxis: {
    labels: {
    overflow: 'justify'
    },
    lineColor: "#1E232A",
    tickColor: "#1E232A",
    type: "category"
    },
series: [{
        name: "BLUE",
    data: [
        { y: 65, z: 13.8, name: 'Belgium' },
        { y: 32.9, z: 14.7, name: 'Germany' },
        { y: 11.5, z: 15.8, name: 'Finland' }
    ]
},
{
    name: "BLACK",
    data: [
        { y: 65, z: 44.8, name: 'Belgium' },
        { y: 32.9, z: 66.7, name: 'Germany' },
        { y: 11.5, z: 77.8, name: 'Finland' }
    ]
},
{
    name: "GREEN",
    data: [
        { y: 65, z: 54.8, name: 'Belgium' },
        { y: 32.9, z: 56.7, name: 'Germany' },
        { y: 11.5, z: 37.8, name: 'Finland' }
    ]
}]

https://jsfiddle.net/433bqnea/

Answer 1

As far as I can see/find there is no direct supported way to do this. The closest I think you can come is either specify x values for each point, or for each series with pointPlacement. I made an example using the pointPlacement:

series: [{
  name: "BLUE",
  pointPlacement: -0.25, //added this
  data: [
    { y: 65, z: 13.8, name: 'Belgium' },
    { y: 32.9, z: 14.7, name: 'Germany' },
    { y: 11.5, z: 15.8, name: 'Finland' }
  ]
},
{
  name: "BLACK",
  data: [
    { y: 65, z: 44.8, name: 'Belgium' },
    { y: 32.9, z: 66.7, name: 'Germany' },
    { y: 11.5, z: 77.8, name: 'Finland' }
  ]
},
{
  name: "GREEN",
  pointPlacement: 0.25, //added this
  data: [
    { y: 65, z: 54.8, name: 'Belgium' },
    { y: 32.9, z: 56.7, name: 'Germany' },
    { y: 11.5, z: 37.8, name: 'Finland' }
  ]
}]

The above will look like this:

Working example: https://jsfiddle.net/433bqnea/3/

API on pointPlacement: https://api.highcharts.com/highcharts/series.bubble.pointPlacement