chart.js 3.7.1 where to go with my plugins? - plugins

Question

I switched from chart.js 2.9.3 to 3.7.1 and some options do not work anymore. If I see it right the options like "Legend" and also "tooltips" went to plugin under "options"?
But it does not work for me. I want to hide the Legend and customize the tooltips.
Where do the plugins go? Any help would be great.
Thank you,
Michael
const titleTooltip_diagramm_fokus = (tooltipItems) => {return "Betroffen";};
const labelTooltip_diagramm_fokus = (tooltipItems) => {return "Tooltip";};
const data_diagramm_fokus = {
datasets: [{
label: ["Positive Value"],
backgroundColor: "rgba(255,0,0,0.2)",
borderColor: "#000",
data: [{
x: 10,
y: 9,
r: 10
}]
},{
label: ["Negative Value"],
backgroundColor: "rgba(255,0,0,0.2)",
borderColor: "#000",
data: [{
x: -5,
y: -5,
r: 5
}]
},{
label: ["Beteiligte / Rollen 3"],
backgroundColor: "rgba(255,0,0,0.2)",
borderColor: "#000",
data: [{
x: -10,
y: -9,
r: 6
}]
},
]};
const options_diagramm_fokus = {
responsive: true,
maintainAspectRatio: true,
title: {
display: false,
text: "Identifiziere die größten fokus"
},
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
max: 10,
min: -10
},
scaleLabel: {
display: true,
labelString: "schwacher Einfluss / starker Einfluss"
}
}],
xAxes: [{
ticks: {
beginAtZero: false,
max: 10,
min: -10
},
scaleLabel: {
display: true,
labelString: "starke Unterstützung / starker Zweifel"
}
}]
},
plugins:{
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var rLabel = (data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r - 2);
var label = data.datasets[tooltipItem.datasetIndex].label || "";
if (label) {
label += ": ";
}
label += "(" + tooltipItem.xLabel + " / ";
label += tooltipItem.yLabel + ") | ";
label += "Betroffenheit: " + rLabel;
return label;
}
}
}
}
};
const plugin_diagramm_fokus = {
id: "plugin_diagramm_fokus",
beforeDraw(chart, args, options) {
const {ctx, chartArea: {left, top, right, bottom}, scales: {x, y}} = chart;
const midX = x.getPixelForValue(0);
const midY = y.getPixelForValue(0);
ctx.save();
ctx.fillStyle = options.topLeft;
ctx.fillRect(left, top, midX - left, midY - top);
ctx.fillStyle = options.topRight;
ctx.fillRect(midX, top, right - midX, midY - top);
ctx.fillStyle = options.bottomRight;
ctx.fillRect(midX, midY, right - midX, bottom - midY);
ctx.fillStyle = options.bottomLeft;
ctx.fillRect(left, midY, midX - left, bottom - midY);
ctx.restore();
}
};
const config_diagramm_fokus = {
type: "bubble",
data: data_diagramm_fokus,
options: {
options_diagramm_fokus,
plugins: {
plugin_diagramm_fokus: {
topLeft: "#9DC3E6",
topRight: "#2E75B6",
bottomRight: "#BDD7EE",
bottomLeft: "#DEEBF7",
}
}
},
plugins: [plugin_diagramm_fokus]
};
const diagramm_fokus = new Chart(
document.getElementById("diagramm_fokus").getContext("2d"),
config_diagramm_fokus,
);
<h2>
Hello!
</h2>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="diagramm_fokus"></canvas>

Answer 1

This is because your options where totally wrong, the options does not have an options object in it and a plugins object. The options object is an object with all the options in it. So if you have a custom plugin you also need to define it in there. Rest of your config is also still wrong with lot of V2 syntax like the title, and scales config. For all changes please read the migration guide
const titleTooltip_diagramm_fokus = (tooltipItems) => {
return "Betroffen";
};
const labelTooltip_diagramm_fokus = (tooltipItems) => {
return "Tooltip";
};
const data_diagramm_fokus = {
datasets: [{
label: ["Positive Value"],
backgroundColor: "rgba(255,0,0,0.2)",
borderColor: "#000",
data: [{
x: 10,
y: 9,
r: 10
}]
}, {
label: ["Negative Value"],
backgroundColor: "rgba(255,0,0,0.2)",
borderColor: "#000",
data: [{
x: -5,
y: -5,
r: 5
}]
}, {
label: ["Beteiligte / Rollen 3"],
backgroundColor: "rgba(255,0,0,0.2)",
borderColor: "#000",
data: [{
x: -10,
y: -9,
r: 6
}]
}, ]
};
const options_diagramm_fokus = {
responsive: true,
maintainAspectRatio: true,
title: {
display: false,
text: "Identifiziere die größten fokus"
},
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
max: 10,
min: -10
},
scaleLabel: {
display: true,
labelString: "schwacher Einfluss / starker Einfluss"
}
}],
xAxes: [{
ticks: {
beginAtZero: false,
max: 10,
min: -10
},
scaleLabel: {
display: true,
labelString: "starke Unterstützung / starker Zweifel"
}
}]
},
plugins: {
legend: {
display: false
},
plugin_diagramm_fokus: {
topLeft: "#9DC3E6",
topRight: "#2E75B6",
bottomRight: "#BDD7EE",
bottomLeft: "#DEEBF7",
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var rLabel = (data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r - 2);
var label = data.datasets[tooltipItem.datasetIndex].label || "";
if (label) {
label += ": ";
}
label += "(" + tooltipItem.xLabel + " / ";
label += tooltipItem.yLabel + ") | ";
label += "Betroffenheit: " + rLabel;
return label;
}
}
}
}
};
const plugin_diagramm_fokus = {
id: "plugin_diagramm_fokus",
beforeDraw(chart, args, options) {
const {
ctx,
chartArea: {
left,
top,
right,
bottom
},
scales: {
x,
y
}
} = chart;
const midX = x.getPixelForValue(0);
const midY = y.getPixelForValue(0);
ctx.save();
ctx.fillStyle = options.topLeft;
ctx.fillRect(left, top, midX - left, midY - top);
ctx.fillStyle = options.topRight;
ctx.fillRect(midX, top, right - midX, midY - top);
ctx.fillStyle = options.bottomRight;
ctx.fillRect(midX, midY, right - midX, bottom - midY);
ctx.fillStyle = options.bottomLeft;
ctx.fillRect(left, midY, midX - left, bottom - midY);
ctx.restore();
}
};
const config_diagramm_fokus = {
type: "bubble",
data: data_diagramm_fokus,
options: options_diagramm_fokus,
plugins: [plugin_diagramm_fokus]
};
const diagramm_fokus = new Chart(
document.getElementById("diagramm_fokus").getContext("2d"),
config_diagramm_fokus,
);
<h2>
Hello!
</h2>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="diagramm_fokus"></canvas>