Highcharts - Пузырьковая диаграмма - Пропорциональные пузыри

Я создаю пузырьковые диаграммы Highcharts на основе данных, выбранных пользователем.

Я ожидал, что пузырьки на диаграммах будут пропорционально размеру друг друга (т.е. пузырь для «2» согласован на многополосных диаграммах), однако, похоже, это основано на диапазоне точек на диаграмме.

Это выделено в этой скрипке

Как видите, цифры «2» на диаграмме №2 имеют тот же размер, что и цифра «6» на диаграмме №1. Я бы хотел, чтобы цифра «2» на диаграмме №2 соответствовала размеру «2» в диаграмме №1.

Есть ли способ добиться этого?

Вот код:

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 }]
});


});