How to remove unwanted x and y coordinates from Scatter Chart in react-chart-js2

73 Views Asked by At

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.

0

There are 0 best solutions below