Labels rotate in RadarChart

[lebiathan]

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.

[allenyin55]

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]

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]

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:

import React from 'react';
var Chart = require("chart.js");
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, **//you had "labels = myCategs;" here**

            datasets:[
                {
                    data : myValues
                }]
    };
        this.chartOptions = Chart.defaults.Radar;
        this.chartOptions.animation = false;
    }

    render(){
        // added a return statement here
        return(
            <div>
                <RadarChart data={this.RadarValues} options={this.chartOptions}/>
            </div>
            )
    }
}

[lebiathan]

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]

@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 MyClass example. 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.