Question

0

89

Views

How do I remove the values on the grid of this chart js radar and how do I disable the effect when hovering on a point?

How to not display the yellow marked?

The points can stay but the hover effect isn't needed.

JSFiddle (if you need): https://jsfiddle.net/ucs8ybLg/14/

Code:

const config = { 
type: 'radar',
data: data,

  options: {
    elements: {
      line: {
        borderWidth: 2
      }
    },
    scales: {
        r: {
            suggestedMin: 0,
            suggestedMax: 10
        }
    }
  },
};

const data = {
  labels: [
    'Problemlösung',
    'Ausdauer',
    'Selbstständigkeit',
    'Zuverlässigkeit',
    'Reflexionsfähigkeit',
    'Teamwork',
    'Respektvoller Umgang',
    'Pflichtbewusstsein'
  ],

  datasets: [{
    label: 'Schüler',
    data: [10, 8, 6, 7, 5, 10, 5, 6],
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
    pointBackgroundColor: 'rgb(255, 99, 132)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(255, 99, 132)'
  },
  {
    label: 'Lehrer',
    data: [8, 10, 7, 7, 3, 9, 8, 7],
    fill: true,
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgb(54, 162, 235)',
    pointBackgroundColor: 'rgb(54, 162, 235)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(54, 162, 235)'
  }]
};

If you need more information just ask

Thank you very much for the help :)

6 months ago · Santiago Gelvez

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-22T16:57:07.776Z

You can add options.plugins.tooltip and set enabled: false So, the hover effect disabled. further more you can visit https://www.chartjs.org/docs/latest/configuration/tooltip.html

const config = {
  type: 'radar',
  data: data,
  options: {
    elements: {
      line: {
        borderWidth: 2
      }
    },
    scales: {
        r: {
            suggestedMin: 0,
            suggestedMax: 10
        }
    },
    plugins: {
        tooltip: {
            enabled: false 
      }
    }
  },
};