Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-13 19:56:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: same-looking tooltips on charts (#10548)

Browse Source 
* 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:
Dan Onoshko
2022-08-18 15:34:35 +04:00
committed by GitHub
parent d09e424a0a
commit e7372ade24
16 changed files with 561 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
docs/samples/other-charts/bubble.md
View File

@@ -1,75 +1,11 @@
# Bubble
```js chart-editor
// <block:actions:2>
const actions = [
{
name: 'Randomize',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data = Utils.bubbles({count: chart.data.labels.length, rmin: 5, rmax: 15, min: 0, max: 100});
});
chart.update();
}
},
{
name: 'Add Dataset',
handler(chart) {
const data = chart.data;
const dsColor = Utils.namedColor(chart.data.datasets.length);
const newDataset = {
label: 'Dataset ' + (data.datasets.length + 1),
backgroundColor: Utils.transparentize(dsColor, 0.5),
borderColor: dsColor,
data: Utils.bubbles({count: data.labels.length, rmin: 5, rmax: 15, min: 0, max: 100}),
};
chart.data.datasets.push(newDataset);
chart.update();
}
},
{
name: 'Add Data',
handler(chart) {
const data = chart.data;
if (data.datasets.length > 0) {
for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.bubbles({count: 1, rmin: 5, rmax: 15, min: 0, max: 100})[0]);
}
chart.update();
}
}
},
{
name: 'Remove Dataset',
handler(chart) {
chart.data.datasets.pop();
chart.update();
}
},
{
name: 'Remove Data',
handler(chart) {
chart.data.labels.splice(-1, 1); // remove the label first
chart.data.datasets.forEach(dataset => {
dataset.data.pop();
});
chart.update();
}
}
];
// </block:actions>
// <block:setup:1>
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, rmin: 5, rmax: 15, min: 0, max: 100};
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
@@ -87,6 +23,66 @@ const data = {
};
// </block:setup>
// <block:actions:2>
const actions = [
{
name: 'Randomize',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data = Utils.bubbles({count: DATA_COUNT, rmin: 5, rmax: 15, min: 0, max: 100});
});
chart.update();
}
},
{
name: 'Add Dataset',
handler(chart) {
const chartData = chart.data;
const dsColor = Utils.namedColor(chartData.datasets.length);
const newDataset = {
label: 'Dataset ' + (chartData.datasets.length + 1),
backgroundColor: Utils.transparentize(dsColor, 0.5),
borderColor: dsColor,
data: Utils.bubbles({count: DATA_COUNT, rmin: 5, rmax: 15, min: 0, max: 100}),
};
chart.data.datasets.push(newDataset);
chart.update();
}
},
{
name: 'Add Data',
handler(chart) {
const chartData = chart.data;
if (chartData.datasets.length > 0) {
for (let index = 0; index < chartData.datasets.length; ++index) {
chartData.datasets[index].data.push(Utils.bubbles({count: 1, rmin: 5, rmax: 15, min: 0, max: 100})[0]);
}
chart.update();
}
}
},
{
name: 'Remove Dataset',
handler(chart) {
chart.data.datasets.pop();
chart.update();
}
},
{
name: 'Remove Data',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data.pop();
});
chart.update();
}
}
];
// </block:actions>
// <block:config:0>
const config = {
type: 'bubble',
@@ -113,4 +109,4 @@ module.exports = {
```
## Docs
* [Bubble](../../charts/bubble.html)
* [Bubble](../../charts/bubble.html)

126
docs/samples/other-charts/scatter-multi-axis.md
View File

@@ -1,75 +1,11 @@
# Scatter - Multi axis
```js chart-editor
// <block:actions:2>
const actions = [
{
name: 'Randomize',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data = Utils.bubbles({count: chart.data.labels.length, rmin: 1, rmax: 1, min: -100, max: 100});
});
chart.update();
}
},
{
name: 'Add Dataset',
handler(chart) {
const data = chart.data;
const dsColor = Utils.namedColor(chart.data.datasets.length);
const newDataset = {
label: 'Dataset ' + (data.datasets.length + 1),
backgroundColor: Utils.transparentize(dsColor, 0.5),
borderColor: dsColor,
data: Utils.bubbles({count: data.labels.length, rmin: 1, rmax: 1, min: -100, max: 100}),
};
chart.data.datasets.push(newDataset);
chart.update();
}
},
{
name: 'Add Data',
handler(chart) {
const data = chart.data;
if (data.datasets.length > 0) {
for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.bubbles({count: 1, rmin: 1, rmax: 1, min: -100, max: 100})[0]);
}
chart.update();
}
}
},
{
name: 'Remove Dataset',
handler(chart) {
chart.data.datasets.pop();
chart.update();
}
},
{
name: 'Remove Data',
handler(chart) {
chart.data.labels.splice(-1, 1); // remove the label first
chart.data.datasets.forEach(dataset => {
dataset.data.pop();
});
chart.update();
}
}
];
// </block:actions>
// <block:setup:1>
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, rmin: 1, rmax: 1, min: -100, max: 100};
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
@@ -89,6 +25,66 @@ const data = {
};
// </block:setup>
// <block:actions:2>
const actions = [
{
name: 'Randomize',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data = Utils.bubbles({count: DATA_COUNT, rmin: 1, rmax: 1, min: -100, max: 100});
});
chart.update();
}
},
{
name: 'Add Dataset',
handler(chart) {
const chartData = chart.data;
const dsColor = Utils.namedColor(chartData.datasets.length);
const newDataset = {
label: 'Dataset ' + (chartData.datasets.length + 1),
backgroundColor: Utils.transparentize(dsColor, 0.5),
borderColor: dsColor,
data: Utils.bubbles({count: DATA_COUNT, rmin: 1, rmax: 1, min: -100, max: 100}),
};
chart.data.datasets.push(newDataset);
chart.update();
}
},
{
name: 'Add Data',
handler(chart) {
const chartData = chart.data;
if (chartData.datasets.length > 0) {
for (let index = 0; index < chartData.datasets.length; ++index) {
chartData.datasets[index].data.push(Utils.bubbles({count: 1, rmin: 1, rmax: 1, min: -100, max: 100})[0]);
}
chart.update();
}
}
},
{
name: 'Remove Dataset',
handler(chart) {
chart.data.datasets.pop();
chart.update();
}
},
{
name: 'Remove Data',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data.pop();
});
chart.update();
}
}
];
// </block:actions>
// <block:config:0>
const config = {
type: 'scatter',
@@ -137,4 +133,4 @@ module.exports = {
## Docs
* [Scatter](../../charts/scatter.html)
* [Cartesian Axes](../../axes/cartesian/)
* [Axis Position](../../axes/cartesian/#axis-position)
* [Axis Position](../../axes/cartesian/#axis-position)

126
docs/samples/other-charts/scatter.md
View File

@@ -1,75 +1,11 @@
# Scatter
```js chart-editor
// <block:actions:2>
const actions = [
{
name: 'Randomize',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data = Utils.bubbles({count: chart.data.labels.length, rmin: 1, rmax: 1, min: 0, max: 100});
});
chart.update();
}
},
{
name: 'Add Dataset',
handler(chart) {
const data = chart.data;
const dsColor = Utils.namedColor(chart.data.datasets.length);
const newDataset = {
label: 'Dataset ' + (data.datasets.length + 1),
backgroundColor: Utils.transparentize(dsColor, 0.5),
borderColor: dsColor,
data: Utils.bubbles({count: data.labels.length, rmin: 1, rmax: 1, min: 0, max: 100}),
};
chart.data.datasets.push(newDataset);
chart.update();
}
},
{
name: 'Add Data',
handler(chart) {
const data = chart.data;
if (data.datasets.length > 0) {
for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.bubbles({count: 1, rmin: 1, rmax: 1, min: 0, max: 100})[0]);
}
chart.update();
}
}
},
{
name: 'Remove Dataset',
handler(chart) {
chart.data.datasets.pop();
chart.update();
}
},
{
name: 'Remove Data',
handler(chart) {
chart.data.labels.splice(-1, 1); // remove the label first
chart.data.datasets.forEach(dataset => {
dataset.data.pop();
});
chart.update();
}
}
];
// </block:actions>
// <block:setup:1>
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, rmin: 1, rmax: 1, min: 0, max: 100};
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
@@ -87,6 +23,66 @@ const data = {
};
// </block:setup>
// <block:actions:2>
const actions = [
{
name: 'Randomize',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data = Utils.bubbles({count: DATA_COUNT, rmin: 1, rmax: 1, min: 0, max: 100});
});
chart.update();
}
},
{
name: 'Add Dataset',
handler(chart) {
const chartData = chart.data;
const dsColor = Utils.namedColor(chartData.datasets.length);
const newDataset = {
label: 'Dataset ' + (chartData.datasets.length + 1),
backgroundColor: Utils.transparentize(dsColor, 0.5),
borderColor: dsColor,
data: Utils.bubbles({count: DATA_COUNT, rmin: 1, rmax: 1, min: 0, max: 100}),
};
chart.data.datasets.push(newDataset);
chart.update();
}
},
{
name: 'Add Data',
handler(chart) {
const chartData = chart.data;
if (chartData.datasets.length > 0) {
for (let index = 0; index < chartData.datasets.length; ++index) {
chartData.datasets[index].data.push(Utils.bubbles({count: 1, rmin: 1, rmax: 1, min: 0, max: 100})[0]);
}
chart.update();
}
}
},
{
name: 'Remove Dataset',
handler(chart) {
chart.data.datasets.pop();
chart.update();
}
},
{
name: 'Remove Data',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data.pop();
});
chart.update();
}
}
];
// </block:actions>
// <block:config:0>
const config = {
type: 'scatter',
@@ -113,4 +109,4 @@ module.exports = {
```
## Docs
* [Scatter](../../charts/scatter.html)
* [Scatter](../../charts/scatter.html)