CODEWITHSUNDEEP
highcharts
Frodik
Frodik

Reputation: 15455

How to change size of bubbles in Highcharts' 3D scatter chart?

I need to change size of bubbles(points) by supplying 4th value in data points in Highcharts' 3D scatter chart. I couldn't find any way how to do this. Can anyone help ?

Upvotes: 1

Views: 348

Answers (1)

Martin Schneider
Martin Schneider

Reputation: 3268

It seems that it is not supported out of the box. Although in this Thread in the Highcharts-Forum, a wrapper is shown that allows a 4th w value to be used as the size of the bubble (see http://jsfiddle.net/uqLfm1k6/1/):

(function (H) {
    H.wrap(H.seriesTypes.bubble.prototype, 'getRadii', function (proceed, zMin, zMax, minSize, maxSize) {
        var math = Math,
            len,
            i,
            pos,
            zData = this.zData,
     wData = this.userOptions.data.map( function(e){ return e.w }),      // ADDED
            radii = [],
            options = this.options,
            sizeByArea = options.sizeBy !== 'width',
            zThreshold = options.zThreshold,
            zRange = zMax - zMin,
            value,
            radius;

        // Set the shape type and arguments to be picked up in drawPoints
        for (i = 0, len = zData.length; i < len; i++) {
     // value = zData[i];                  // DELETED
     value = this.chart.is3d()? wData[i] : zData[i];   // ADDED

            // When sizing by threshold, the absolute value of z determines the size
            // of the bubble.
            if (options.sizeByAbsoluteValue && value !== null) {
                value = Math.abs(value - zThreshold);
                zMax = Math.max(zMax - zThreshold, Math.abs(zMin - zThreshold));
                zMin = 0;
            }

            if (value === null) {
                radius = null;
            // Issue #4419 - if value is less than zMin, push a radius that's always smaller than the minimum size
            } else if (value < zMin) {
                radius = minSize / 2 - 1;
            } else {
                // Relative size, a number between 0 and 1
                pos = zRange > 0 ? (value - zMin) / zRange : 0.5;

                if (sizeByArea && pos >= 0) {
                    pos = Math.sqrt(pos);
                }
                radius = math.ceil(minSize + pos * (maxSize - minSize)) / 2;
            }
            radii.push(radius);
        }
        this.radii = radii;
    });
}(Highcharts));

Upvotes: 3

Related Questions