How to scale the radius property of each bubble in a vue-chartjs bubble chart

[johnboc]

I am trying to scale the radius property of each bubble in a vue-chartjs bubble chart.

I have been trying to replicate the example at https://github.com/chartjs/Chart.js/blob/master/samples/scriptable/bubble.html but I cannot see how to obtain the data value to pass to the function. In my code below d should be the data value of the bubble.

data: function() {
    return {
        options: {
            elements: {                    
                point: {                                
                    radius: this.calcRadius(d)
				}
			}
		}
	}
},

methods: {
    calcRadius(d) {
        var base = Math.abs(d) / 1000;
        return (this.width / 24) * base;
    }
} 

I have tried accessing the chart.js instance using this._chart but this doesn't seem to be available when setting the chart options.

Any help much appreciated.

[apertureless]

Hey @johnboc

Well this._chart is only available after the first initialization. See here https://github.com/apertureless/vue-chartjs/blob/develop/src/BaseCharts/Bar.js#L78

So you can't really access it in other methods before the first renderChart() is called.

But generally I don't see a problem achieving a custom bubble radius. However you are passing (d) to your method. But this is imo the whole context you have. I guess you need to get the proper datapoint

Like in your example

radius: function(context) {
	var value = context.dataset.data[context.dataIndex];
	var size = context.chart.width;
	var base = Math.abs(value.v) / 1000;
	return (size / 24) * base;
}

[johnboc]

Thanks, but what I don't understand is how to access context to be able to access the data points when the calcRadius function is called.

data: function() {
    return {
        options: {
            elements: {                    
                point: {                                
                    radius: this.calcRadius(context)
				}
			}
		}
	}
},

Your code example works in chart.js but I can't see how to replicate it in vue-chartjs.

[apertureless]

Well you just pass the context. Works well.

https://codepen.io/apertureless/pen/NwrLWX

[johnboc]

Great - many thanks

[dagdashboard]

I am using the latest version of chart.js which is 2.9.3. While using this function I am getting error the following error
Type '(context: any) => number' is not assignable to type 'number'.