Radar graph options ignored #837
Description
Hello everyone. There are at least a few fields in the radar graph options that seem to be completely ignored. When I use these options in regular old chartjs they work fine. But once I implement the radar chart using react-chartjs-2 wrapper, certain options are ignored.
The options for grid, angleLines, and pointLabels are completely ignored when using react-chartjs-2. But they work without the wrapper. Here is example code where the options are ignored when using react-chartjs-2:
import React from 'react';
import { Radar } from 'react-chartjs-2';
const data = {
labels: ['Thing 1', 'Thing 2', 'Thing 3', 'Thing 4', 'Thing 5', 'Thing 6'],
datasets: [
{
label: '# of Votes',
data: [2, 9, 3, 5, 2, 3],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
},
],
};
const options = {
scale: {
r: {
min: 0,
max: 10,
ticks: {
beginAtZero: true,
fontColor: 'white', // labels such as 10, 20, etc
showLabelBackdrop: false // hide square behind text
},
grid: {
color: 'pink',
circular: true,
},
angleLines: {
color: 'pink'
},
pointLabels: {
fontColor: 'white' // labels around the edge like 'Running'
},
},
},
};
const RadarChart = () => (
<>
<div className='header'>
<h1 className='title'>Radar Chart</h1>
<div className='links'>
<a
className='btn btn-gh'
href='https://github.com/reactchartjs/react-chartjs-2/blob/master/example/src/charts/Radar.js'
>
Github Source
</a>
</div>
</div>
<Radar data={data} options={options} />
</>
);
export default RadarChart;Here is example code where they are not ignored when using just chartjs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chart.js Drag Data Points Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.1/chart.min.js"></script>
<script src="assets/chartjs-plugin-dragdata.min.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
}
canvas {
background-color: #eee;
position: absolute;
}
</style>
</head>
<body>
<canvas id="chartJSContainer" style="height: 90%; width: 90%;"></canvas>
<script>
var options = {
type: 'radar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
pointHitRadius: 25
}]
},
options: {
responsive: false,
onHover: function(e) {
const point = e.chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, false)
if (point.length) e.native.target.style.cursor = 'grab'
else e.native.target.style.cursor = 'default'
},
plugins: {
dragData: {
round: 1,
showTooltip: true,
onDragStart: function(e) {
// console.log(e)
},
onDrag: function(e, datasetIndex, index, value) {
e.target.style.cursor = 'grabbing'
// console.log(e, datasetIndex, index, value)
},
onDragEnd: function(e, datasetIndex, index, value) {
e.target.style.cursor = 'default'
// console.log(datasetIndex, index, value)
},
}
},
scales: {
r: {
max: 30,
min: 0,
stepSize: 1,
grid: {
color: 'pink',
circular: true,
},
angleLines: {
color: 'pink'
},
pointLabels: {
fontColor: 'white' // labels around the edge like 'Running'
},
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
window.test = new Chart(ctx, options);
</script>
</body>
</html>There may be other options that are ignored, but I haven't tested anything else. I hope I am just doing something wrong, if so can anyone clarify?
Metadata
Metadata
Assignees
Labels
No labels