0👍
✅
Try this one,
<Line
options={{
title: {
display: true
},
legend: {
display: false
},
responsive: true,
tooltips: {
mode: "index",
intersect: false,
callbacks: { //Added callbacks for label
title: () => {
return "";
},
label: (tooltipItems, data) => {
return "(" + tooltipItems.xLabel + "," + tooltipItems.yLabel + ")";
}
}
},
hover: {
mode: "index",
intersect: false
},
elements: {
line: {
fill: false,
borderWidth: 5
}
},
scales: {
yAxes: [
{
ticks: {
fontColor: "black"
},
labels: [
{ x: 80, y: 90 },
{ x: 81, y: 29 },
{ x: 56, y: 36 },
{ x: 55, y: 25 },
{ x: 40, y: 18 }
].map((z) => {
return z.y;
}),
scaleLabel: {
display: true,
fontSize: 15,
fontColor: "black",
fontStyle: "bold",
labelString: "True Positive Rate"
}
}
],
xAxes: [
{
ticks: {
fontColor: "black"
},
labels: [
{ x: 80, y: 90 },
{ x: 81, y: 29 },
{ x: 56, y: 36 },
{ x: 55, y: 25 },
{ x: 40, y: 18 }
].map((z) => {
return z.x; // Changed this line
}),
scaleLabel: {
display: true,
fontSize: 15,
fontColor: "black",
fontStyle: "bold",
labelString: "False Positive Rate"
}
}
]
}
}}
height={150}
data={{
datasets: [
{
fill: false,
borderColor: "#EC932F",
backgroundColor: "#212F3D",
pointBorderColor: "#B2BABB",
pointBackgroundColor: "#D4AC0D",
pointHoverBackgroundColor: "#D4AC0D",
pointHoverBorderColor: "black",
lineTension: 0.1,
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBorderWidth: 2,
pointRadius: 3,
pointHitRadius: 10,
data: [
{ x: 80, y: 90 },
{ x: 81, y: 29 },
{ x: 56, y: 36 },
{ x: 55, y: 25 },
{ x: 40, y: 18 }
]
}
]
}}
/>
Source:stackexchange.com