Highcharts - Bubble chart - Proportional bubbles

Question

I'm producing Highcharts bubble charts based on user selected data.

I'd have expected the bubbles on the charts to be proportionally sized to each other (i.e. the bubble for a '2' is consistent through multilpe charts) however, it seems to be based on the range of points on the chart.

This is highlighted in this fiddle

As you can see, the '2's in chart #2 are the same size as the '6' in chart #1. I'd like the '2' in chart #2 to match the size of the '2' in chart #1.

Is there any way of achieving this ?

Here's the code:

jQuery(function () {

var data1 = [{ x: 0, y: 0, z: 0, label: 'data #1' },
            { x: 1, y: 1, z: 1, label: 'data #2' },
            { x: 2, y: 2, z: 2, label: 'data #3' },
            { x: 3, y: 3, z: 3, label: 'data #4' },
            { x: 4, y: 4, z: 4, label: 'data #5' },
            { x: 5, y: 5, z: 5, label: 'data #6' },
            { x: 6, y: 6, z: 6, label: 'data #7' }]; 

var data2 = [{ x: 0, y: 0, z: 0, label: 'data #1' },
            { x: 1, y: 1, z: 1, label: 'data #2' },
            { x: 2, y: 1, z: 1, label: 'data #3' },
            { x: 3, y: 2, z: 2, label: 'data #4' },
            { x: 4, y: 2, z: 2, label: 'data #5' },
            { x: 5, y: 1, z: 1, label: 'data #6' },
            { x: 6, y: 0, z: 0, label: 'data #7' }]; 

jQuery('#container').highcharts({

    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },
        credits: false,

    legend: {
        enabled: false
    },

    title: {
        text: ''
    },

    xAxis: {
        gridLineWidth: 1,
        title: {
            text: ''
        },
       categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7']
    },

    yAxis: {
        startOnTick: true,
        min: -1,
        max: 7,
        showFirstLabel: false,
        showLastLabel: false,
        tickInterval: 1,
        title: {
            text: 'Score'
        },
        labels: {
            format: '{value}'
        },
        maxPadding: 0.2
    },

    tooltip: {
        useHTML: true,
        headerFormat: '<table>',
        pointFormat: '<tr><th colspan="2"><h3>{point.label}</h3></th></tr>' +
            '<tr><th>Score:</th><td>{point.y}</td></tr>',
        footerFormat: '</table>',
        followPointer: true
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    },
    series: [{ data: data1 }]
});


jQuery('#container2').highcharts({

    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },
        credits: false,

    legend: {
        enabled: false
    },

    title: {
        text: ''
    },

    xAxis: {
        gridLineWidth: 1,
        title: {
            text: ''
        },
       categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7']
    },

    yAxis: {
        startOnTick: true,
        min: -1,
        max: 7,
        showFirstLabel: false,
        showLastLabel: false,
        tickInterval: 1,
        title: {
            text: 'Score'
        },
        labels: {
            format: '{value}'
        },
        maxPadding: 0.2
    },

    tooltip: {
        useHTML: true,
        headerFormat: '<table>',
        pointFormat: '<tr><th colspan="2"><h3>{point.label}</h3></th></tr>' +
            '<tr><th>Score:</th><td>{point.y}</td></tr>',
        footerFormat: '</table>',
        followPointer: true
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    },
    series: [{ data: data2 }]
});


});

Answer 1

This is similar to what I had proposed as an answer to another bubble chart question elsewhere on Stack Overflow:

Highcharts 3.0 Bubble Chart -- Controlling bubble sizes

For your situation, it seems adding a transparent, non-interactive "dummy" bubble with the largest possible dimensions in your chart will keep each of the other bubbles in the proper proportions to one another:

series: [{ data: data2 }, 
    // dummy series to keep all the bubbles in proportion
    {name: 'dummy series',
    data: [{x:6,y:6,z:6}], 
    showInLegend: false, 
    color: 'transparent', 
    enableMouseTracking: false}
]

Here's an updated version of your fiddle with this fix: http://jsfiddle.net/brightmatrix/svcuLgso/13/

Please let me know if this solves your issue!