Change scope of MDB React Radar-Chart?

Topic: Change scope of MDB React Radar-Chart?

Christian Aichner pro asked 4 years ago

I am using the "Radar" component of the "react-chartjs-2" package .

Desired behavior

The scope / scale of the data-set should always be 0-100. No matter the given data input.

Actual behavior

Depending on the given data the scale can change. This makes perfect sense in most cases, as the data gets displayed more evenly and provides better readability.In my case, however, I wish to stick to a 0-100 scope.

Resources (screenshots, code snippets etc.)

dataRadar: {
    labels: ["#1", "#2", "#3", "#4", "#5", "#6"],
    datasets: [
      {
        label: "Data-Set",
        backgroundColor: "rgba(60, 130, 255, 0.5)",
        boderColor: "rgb(60, 130, 255)",
        data: [32, 10, 50, 30, 40, 20]
      }
    ]
  }

The result is as follows:

Current output

My desired output should be (Don't mind the second data-set, it's there to achieve the 0-100 scope):

desired output

Is there any way to achieve a 0-100 scope without cheating using a second data-set?

Add comment

Konrad Stępień staff answered 4 years ago

1 0 Best answer

Hi, if you wanna have 0-100 scope you have to use Scale options like this:

Or like this

<pre class="prettyprint"><code>state = {
 dataRadar: {
 labels: ["#1", "#2", "#3", "#4", "#5", "#6"],
 datasets: [
 {
 label: "Data-Set",
 backgroundColor: "rgba(60, 130, 255, 0.5)",
 boderColor: "rgb(60, 130, 255)",
 data: [32, 10, 50, 30, 40, 20],
 }
 ],
 },
 options: {
 scale: {
 ticks: {max: 100}
 }
 }
}
</code></pre>

and then use this:

<img src="https://usercontent.mdbootstrap.com/mdb-images/support/256e496d-7af0-49fc-a50f-3a9c82f0a144-Screenshot%20from%202019-05-31%2010-01-02.jpg" alt="enter image description here" title="">
Yours faithfully, Konrad.

Please insert min. 20 characters.

Hi, if you wanna have 0-100 scope you have to use Scale options like this:

<Radar data={this.state.dataRadar} options={{ scale: {
     ticks: {max: 100}}}} />

Or like this

state = {
  dataRadar: {
    labels: ["#1", "#2", "#3", "#4", "#5", "#6"],
    datasets: [
      {
        label: "Data-Set",
        backgroundColor: "rgba(60, 130, 255, 0.5)",
        boderColor: "rgb(60, 130, 255)",
        data: [32, 10, 50, 30, 40, 20],
      }
    ],
  },
  options: {
    scale: {
      ticks: {max: 100}
    }
  }
}

and then use this:

<Radar data={this.state.dataRadar} options={this.state.options} />

enter image description here Yours faithfully, Konrad.

Christian Aichner pro commented 4 years ago

Thank you! Works like a charm! This should be added to the Chart documentation though ;)

Konrad Stępień staff commented 4 years ago

No problem. In the coming days it will be added :)

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB React
MDB Version: 4.13.0
Device: Desktop
Browser: Google Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

Christian Aichner

Pro User 171Support score
8Questions 12Answers 0Snippets