I wanted to create a Scatter chart with labels on the y-axis and values on the x-axis. I was able to make a little progress, but I have a problem with unwanted x and y coordinates on the chart displayed by default. I cannot find a similar problem on the Internet hence the post there.
Can someone advice me, how can I remove those coordinates from chart? Img with unwanted coordinates being shown
That's my mvp code. Package version used: "react-chartjs-2": "^4.3.1"
<Scatter
options={{
animation: false,
scales: {
x: {
type: 'linear',
position: 'bottom',
title: {
display: true,
text: 'Association'
}
},
y: {
type: 'category',
title: {
display: true,
text: 'Attributes (by importance)'
}
}
},
plugins: {
legend: {
display: false // Hide the legend
}
}
}}
data={{
labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
datasets: [
{
label: 'Scatter Data',
data: [
{ x: 10, y: 0 }, // Set the y-values to 0 if you want labels on the y-axis
{ x: 15, y: 0 },
{ x: 30, y: 0 },
{ x: 45, y: 0 },
{ x: 60, y: 0 }
],
backgroundColor: 'rgba(75, 192, 192, 0.6)',
pointRadius: [10],
pointStyle: 'hidden'
}
]
}}
/>
I've tried different scenarios with custom labeling and legend, but none of them worked properly.