Repository navigation
Labels rotate in RadarChart #170
Description
Hi,
This may totally be a problem with my code as I've not worked before w/ the library.
I have a radar chart within a class that I'm using ( a page that gets displayed after some search ).
My code, roughly, looks like the following:
var Chart = require("chart.js");
var classnames = require('classnames');
var RadarChart = require("react-chartjs").Radar;
export default class MyClass extends React.Component{
constructor( props ){
super( props );
var myCategs = [ "A", "B", "C", "D", "E" ];
var myValues = [ 0.2, 0.4, 0.6, 0.8, 1.0 ];
this.RadarValues = {
labels = myCategs;
datasets:[{
data : myValues
}]
};
this.chartOptions = Chart.defaults.Radar;
this.chartOptions.animation = false;
}
render(){
<div>
<RadarChart data={this.RadarValues} options={this.chartOptions}/>
</div>
}
}
There are some additional bindings to events, mostly when the mouse enters the region of the component and on click. (omitted for brevity). The code in those situations does not alter the current properties of the class ( this.props is unaffected ).
The problem that I'm facing is as follows: Whenever the mouse enters / exits the region of the component, the labels of my radar plot get rearranged. On top of that I start seeing the same value twice.
In particular, by "printing" the contents of this.RadarValues.labels, I get the following results (subsequent mouse enter / exits):
Starting point: [ "A", "B", "C", "D", "E" ]
Mouse enters: [ "A", "B", "C", "D", "A" ] // Notice how E got replaced by A
Mouse exits: [ "B", "C", "D", "A", "B" ]
Mouse enters: [ "C", "D", "A", "B", "C" ]
Mouse exits: [ "D", "A", "B", "C", "D" ]
Mouse enters: [ "A", "B", "C", "D", "A" ]
...
As you can see, eventually, not only is one of my original labels missing, but the labels rotate. The more interesting thing is that the values in my dataset ( datasets.data ) remain constant.
Is this because of some property that I'm not setting? Is it a bug perhaps? If it is one, where should I start looking and help resolve it?
Following the instructions, I installed chartjs (and its dependencies) through:
npm install --save react-chartjs
Thanks in advance!
George
PS: If the information I've provided is not sufficient, let me know.
Activity
allenyin55 commentedon Jan 2, 2017
Hi @lebiathan, I had a similar problem just now, and I solved it by passing 'redraw' as a prop to my radar chart. In your case, you can try something like
<RadarChart data={this.RadarValues} options={this.chartOptions} redraw/>Hope it helps.
lebiathan commentedon Jan 2, 2017
Hi @allenyin55, thanks for the feedback. I'll give it a try.
From what I noticed by digging into the code, the problem has to do w/ the chart.removeData() invocation in: https://github.com/reactjs/react-chartjs/blob/master/dist/react-chartjs.js, line 196.
It seems that this method removes one of the labels, but not the respective data point. Honestly, I do not know why the label needs to be removed. However, because of the following loop in the code (197-205), the 1st label is picked up and appended in the end. Seems like the fix would be to remove line 196, but didn't try it (also don't know how it affects other parts of the code).
Thanks again!
George
allenyin55 commentedon Jan 2, 2017
Hi @lebiathan, I just read the source code and it looks fine to me. I tried running your code and it doesn't compile for me. With some modifications, I got it work for me and I am not experiencing the label rotating issue.
Here's the code:
lebiathan commentedon Jan 3, 2017
Hi @allenyin55,
Thanks for the follow-up, really appreciate it. Most likely the assignment sign ( labels = myCategs ), was a poor porting of my code ( I removed a bunch of stuff, didn't just do copy / paste ). The code was compiling, so I doubt that was the reason for missing out a value.
I'll give a try to your suggestions and have another look at my code (went on w/ a different library for now though).
I'll let everyone know how that goes, and I'll also check out the redraw parameter that you mentioned in your earlier comment.
Thanks again!
George
bpina commentedon Mar 5, 2017
@lebiathan I was having the same issue, but using the redraw attribute that @allenyin55 mentioned seems to have solved the problem.
I reproduced the issue with static data, quite similar to the updated
MyClassexample. The chart's parent container was being hidden/shown, so the chart was being re-rendered each time the parent became visible. Each additional time the chart was rendered, the labels would shift around, and one of the labels would then become duplicated in place of another in the list.