I need help adding labels to the pink scatter dots without affecting the green bars in the horizontal bar chart generated by ngchart. You can see an image of the chart here.
Whenever I try to include the following code:
import ChartDataLabels from "chartjs-plugin-datalabels";
I encounter these errors:
Error: node_modules/chartjs-plugin-datalabels/types/context.d.ts:1:16 - error TS2724: Module '"../../@types/chart.js"' has no exported member 'ChartDataset'. Did you mean 'ChartDataSets'?
1 import {Chart, ChartDataset} from 'chart.js';
~~~~~~~~~~~~
node_modules/chartjs-plugin-datalabels/types/index.d.ts:1:20 - error TS2305: Module '"../../@types/chart.js"' has no exported member 'Plugin'.
1 import {ChartType, Plugin} from 'chart.js';
~~~~~~
Does anyone know of an alternative library I can use to add labels to the pink scatter dots or a solution to resolve these errors?
Thank you in advance!
UPDATE:
After @LeeLenalee's suggestion, I have installed version 1 of the library, but I'm not seeing any labels next to the dots. Can anyone help me understand why? Here is the code for my chart:
public disproportionChartData = [
{
label: "Disproportionality",
data: [
{ y: 80, x: 80 },
{ x: 40, y: 40 },
{ y: 0, x: 0 },
{ y: -40, x: -40 },
{ y: -80, x: -80 },
],
borderColor: "pink",
backgroundColor: "pink",
pointRadius: 10,
type: "scatter",
xAxisID: "x2",
yAxisID: "y2",
datalabels: {
display: true,
align: "right",
color: "black",
formatter: function (value, context) {
return context.chart.data.labels[context.dataIndex];
},
},
},
{
type: "horizontalBar",
label: "Population 1 %",
data: [-10, -40, -80, -70, -20],
},
{
type: "horizontalBar",
label: "Population 2 %",
data: [10, 20, 30, 50, 90],
},
];
public disproportionChartLabels = [
"Type 1",
"Type 2",
"Type 3",
"Type 4",
"Type 5",
];
public disproportionChartPlugins = [ChartDataLabels];
public disproportionChartOptions = {
responsive: true,
legend: {
position: "top",
},
title: {
display: false,
},
tooltips: {
callbacks: {
title(items) {
const ds2 = items.filter((element) => element.datasetIndex === 1);
return ds2[0].label;
},
},
},
plugins: {
datalabels: {
display: false,
},
},
scales: {
xAxes: [
{
id: "x2",
type: "linear",
position: "top",
ticks: {
callback(value) {
return Math.abs(value);
},
min: -100,
max: 100,
},
},
],
yAxes: [
{
stacked: true,
position: "left",
ticks: {
callback: function (value, index, values) {
return value < 0 ? -value : value;
},
},
},
{
id: "y2",
stacked: true,
position: "right",
ticks: {
callback(value) {
return value;
},
min: -100,
max: 100,
},
},
],
},
};