Bubble Chart with single dataset can have different background color for different data type OR Can Multiple Dataset in bubble chart show single point data on tooltip hover

[KeshavHeda]

var datacb4 = {
datasets: [
{
label: 'Close', backgroundColor: 'rgba(0, 255, 0, 1)', data: [{ x: '8', y: '7', r: '2' }, { x: '71', y: '59', r: '2' }]
},
{
label: 'Archive', backgroundColor: 'rgba(102, 0, 0, 1)', data: [{ x: '7', y: '7', r: '4' }]
},
{
label: 'Delete', backgroundColor: 'rgba(0, 0, 255, 1)', data: [{ x: '0', y: '6', r: '6' }, { x: '6', y: '6', r: '6' }, { x: '7', y: '7', r: '6' }]
},
]
};
var cbctx = $('#canvasts0');
var myCBChart = new Chart(cbctx,
{
type: 'bubble',
data: datacb4,
options:
{
title: { text: 'SSA [ 6 ] ', display: 'true' },
tooltips: { mode: 'label' },
hover: { mode: 'label' },
legend: { display: 'true' },
scaleBeginAtZero: 'true',
responsive: 'true',
scales: {
xAxes: [{ position: 'bottom', gridLines: { zeroLineColor: 'rgba(0,0,0,1)' }, scaleLabel: { display: 'true', labelString: 'size KB' } }],
yAxes: [{ position: 'left', gridLines: { zeroLineColor: 'rgba(0,0,0,1)' }, scaleLabel: { display: 'true', labelString: 'duration sec' } }]
}
}
});</script>

[etimberg]

Could you please drop this in a fiddle?

[KeshavHeda]

@etimberg -> The Fiddle is provided in below URL.
https://jsfiddle.net/x2doa0bo/

Please add chartjs and jquery script file as i am unaware how to add external script file in fiddle.
Let me know if you have any doubts.

[etimberg]

Updated fiddle with external dependencies: https://jsfiddle.net/x2doa0bo/2/

[KeshavHeda]

@etimberg -> Thanks for updating external reference.
I was trying to use tooltip { mode : 'single' }.
This was showing one value for distinct point.
When points are too close, i still see multiple datas in tooltip.

I was trying to analyse the issue and found one point where i think, fixes needs to be made.
The callback method is called for each dataset.
We are already fetching 1) element._index and 2) element._datasetIndex values. We need to use these values to get tooltip item rather than looping. Need to check if this will cause issue anywhere else.

Line 11571 : update: function(changed) {

if (this._options.tooltips.mode === 'single') {
.....
tooltipPosition = this.getAveragePosition(this._active);
} else {
helpers.each(this._data.datasets, function(dataset, datasetIndex) {
if (!this._chartInstance.isDatasetVisible(datasetIndex)) {
return;
}
var meta = this._chartInstance.getDatasetMeta(datasetIndex);
var currentElement = meta.data[element._index];
if (currentElement) {
var yScale = element._yScale || element._scale; // handle radar || polarArea charts

                        tooltipItems.push({
                            xLabel: currentElement._xScale ? currentElement._xScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '',
                            yLabel: yScale ? yScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '',
                            index: element._index,
                            datasetIndex: datasetIndex
                        });
                    }
                }, this);

Also, after updating the fiddle and pointing to new cdn chartjs reference, the tooltip works only for first time. After that we get "Object ref Exception" for "_xScale" property. Can you please update external reference again?

Let me know if you need any further assistance and i will be glad to walk through it.

Regards,
Keshav

[KeshavHeda]

I guess hover and tooltip are not to be set together. This was causing the issue.
After disabling hover event, i am able to get required result.
But for close points, i can still see the issue.
Maybe someone can look at the javascript function and fix the issue in hover or tooltip function.
This still needs to be tested thoroughly with latest code.

Thanks @etimberg for helping in the fiddle.

[etimberg]

I believe the issues seen with the hovering and tooltips having multiple items were fixed in #3400 with the new modes