Is there any way to fill bubbles partially in highcharts bubble chart?

highcharts, javascript

Solution

You can set for each bubble specific color, so also you can se gradients. For example 25% of bubble should be filled with red, the rest with light red: http://jsfiddle.net/TL3AV/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'bubble'
    },
    plotOptions: {
        bubble: {
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    },
    series: [{
        data: [{
            x: 29.9,
            y: 71.5,
            z: 106.4
        }, {
            x: 129.2,
            y: 144.0,
            z: 176.0,
            color: {
                linearGradient: {
                    x1: 0,
                    x2: 0,
                    y1: 0,
                    y2: 1
                },
                stops: [ 
                    [0, 'rgb(255,100,100)'],
                    [0.25, 'rgb(255,100,100)'],
                    [0.26, 'rgb(255,200,200)'],
                    [1, 'rgb(255,200,200)']
                ]
            }
        }]
    }]
});

I advice to disable hover, to prevent changing color to default one.

Problem

Is there is any way to fill individual bubble's partially / fully (depending on % text in bubble) with different shade's of bubble color using highcharts. I am trying to achieve this through renderer options, but not getting proper information. Any reference link is also appreciated. Regards, Sopo

Original source