mirror of
https://github.com/chartjs/Chart.js.git
synced 2026-03-14 04:06:49 +01:00
fix: same-looking tooltips on charts (#10548)
* fix: same-looking tooltips on multiseries charts * fix: same-looknig tooltips on all chart types * chore: restore tooltip plugin * docs: additions to migration guide * docs: remove labels from scatter and bubble examples * docs: review fix
This commit is contained in:
@@ -31,16 +31,6 @@ export default class BubbleController extends DatasetController {
|
||||
y: {
|
||||
type: 'linear'
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
title() {
|
||||
// Title doesn't make sense for scatter since we format the data as a point
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -105,6 +95,7 @@ export default class BubbleController extends DatasetController {
|
||||
*/
|
||||
getLabelAndValue(index) {
|
||||
const meta = this._cachedMeta;
|
||||
const labels = this.chart.data.labels || [];
|
||||
const {xScale, yScale} = meta;
|
||||
const parsed = this.getParsed(index);
|
||||
const x = xScale.getLabelForValue(parsed.x);
|
||||
@@ -112,7 +103,7 @@ export default class BubbleController extends DatasetController {
|
||||
const r = parsed._custom;
|
||||
|
||||
return {
|
||||
label: meta.label,
|
||||
label: labels[index] || '',
|
||||
value: '(' + x + ', ' + y + (r ? ', ' + r : '') + ')'
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import DatasetController from '../core/core.datasetController';
|
||||
import {isArray, isObject, resolveObjectKey, toPercentage, toDimension, valueOrDefault} from '../helpers/helpers.core';
|
||||
import {isObject, resolveObjectKey, toPercentage, toDimension, valueOrDefault} from '../helpers/helpers.core';
|
||||
import {formatNumber} from '../helpers/helpers.intl';
|
||||
import {toRadians, PI, TAU, HALF_PI, _angleBetween} from '../helpers/helpers.math';
|
||||
|
||||
@@ -119,28 +119,6 @@ export default class DoughnutController extends DatasetController {
|
||||
legend.chart.toggleDataVisibility(legendItem.index);
|
||||
legend.chart.update();
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
title() {
|
||||
return '';
|
||||
},
|
||||
label(tooltipItem) {
|
||||
let dataLabel = tooltipItem.label;
|
||||
const value = ': ' + tooltipItem.formattedValue;
|
||||
|
||||
if (isArray(dataLabel)) {
|
||||
// show value on first line of multiline label
|
||||
// need to clone because we are changing the value
|
||||
dataLabel = dataLabel.slice();
|
||||
dataLabel[0] += value;
|
||||
} else {
|
||||
dataLabel += value;
|
||||
}
|
||||
|
||||
return dataLabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -63,18 +63,6 @@ export default class PolarAreaController extends DatasetController {
|
||||
legend.chart.toggleDataVisibility(legendItem.index);
|
||||
legend.chart.update();
|
||||
}
|
||||
},
|
||||
|
||||
// Need to override these to give a nice default
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
title() {
|
||||
return '';
|
||||
},
|
||||
label(context) {
|
||||
return context.chart.data.labels[context.dataIndex] + ': ' + context.formattedValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -26,19 +26,6 @@ export default class ScatterController extends DatasetController {
|
||||
mode: 'point'
|
||||
},
|
||||
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
title() {
|
||||
return ''; // doesn't make sense for scatter since data are formatted as a point
|
||||
},
|
||||
label(item) {
|
||||
return '(' + item.label + ', ' + item.formattedValue + ')';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
scales: {
|
||||
x: {
|
||||
type: 'linear'
|
||||
@@ -49,6 +36,23 @@ export default class ScatterController extends DatasetController {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @protected
|
||||
*/
|
||||
getLabelAndValue(index) {
|
||||
const meta = this._cachedMeta;
|
||||
const labels = this.chart.data.labels || [];
|
||||
const {xScale, yScale} = meta;
|
||||
const parsed = this.getParsed(index);
|
||||
const x = xScale.getLabelForValue(parsed.x);
|
||||
const y = yScale.getLabelForValue(parsed.y);
|
||||
|
||||
return {
|
||||
label: labels[index] || '',
|
||||
value: '(' + x + ', ' + y + ')'
|
||||
};
|
||||
}
|
||||
|
||||
update(mode) {
|
||||
const meta = this._cachedMeta;
|
||||
const {data: points = []} = meta;
|
||||
|
||||
Reference in New Issue
Block a user