React-chartjs-2: Radar chart tooltip label incorrect

Created on 3 Nov 2020  路  4Comments  路  Source: reactchartjs/react-chartjs-2

I see your live demo, found that radar chart tooltip labels were incorrect.
Like the live demo page, the label should be "Thing 1", "Thing 2", but it appear the data number.
I tried the code in my project it caused the same problem, and I use the origin chart.js is fine.

Thanks!

Most helpful comment

The "# of Votes" text that is appearing is set here. This is the intentional behavior of chart.js, an example of this can be seen here.

If it is desired to change what is appearing in the tooltip, that is functionality that can be changed in the label callback portion of the options.

All 4 comments

Would you mind attaching/referencing some code so I can investigate this further?

I found the live demo site is broken, so I try a simple code about radar chart.

```javascript=
const labels = ['label1', 'label2', 'label3', 'label4', 'label5'];

const radarData = {
labels: labels,
datasets: [
{
label: 'radar',
fill: true,
cubicInterpolationMode: 'monotone',
backgroundColor: 'rgba(66,129,164,0.2)',
borderColor: 'rgba(66,129,164,1)',
pointBorderColor: '#fff',
pointBackgroundColor: 'rgba(66,129,164,1)',
data: [1,2,3,4,5]
}
]
};

const radarOptions = {
maintainAspectRatio: true,
responsive: true,
legend: {
labels: {
fontColor: 'rgba(248, 184, 82, 1)',
fontSize: 16
}
}
};

class App extends Component {
render() {
console.log(radarData)
return (




data={radarData}
width={400}
height={350}
options={radarOptions}
/>



);
}
}

export default App;
```

And I screenshot the radar graph, I thought the label text must be "label4" instead of "4"?

The "# of Votes" text that is appearing is set here. This is the intentional behavior of chart.js, an example of this can be seen here.

If it is desired to change what is appearing in the tooltip, that is functionality that can be changed in the label callback portion of the options.

okay it works. Thanks a lot!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

davidcalhoun picture davidcalhoun  路  5Comments

alexchoiweb picture alexchoiweb  路  3Comments

thanh121094 picture thanh121094  路  3Comments

flyingpath picture flyingpath  路  5Comments

flxwu picture flxwu  路  3Comments