0

I'm working with Chart.js and it's awesome, but I have a problem, I made this Radar Chart with Chart.js

Radar Chart

As you see, the values that I have are very scattered so I need to set a max value for each label, is there a way to do this?

This is my code:

  @data = {
      labels: ["Health", "Phyisical Attack", "Magic Attack", "Phyisical Armor", "Magic Armor  "],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [@health_growth[0], @physical_attack_growth[0], @magic_attack_growth[0], @physical_armor_growth[0], @magic_armor_growth[0]]
          },
      ]
  };
  @options = {}

Thanks.

Edit: Ok, I see that scaleSteps, scaleStepWidth and scaleStartValue can do the job, but I need to set those values for each label, is there a way to do this?

1 Answer 1

0

Just scale the values and then divide by the scaling factor before you show the respective tooltip

var scaling = [10, 10, 10, 1, 1, 1, 1];
var data = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [5, 5, 9, 81, 56, 55, 40].map(function (e, i) {
                return e * scaling[i];
            })
        }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myRadarChart = new Chart(ctx).Radar(data, {
    tooltipTemplate: function (valueObject) {
        return valueObject.value / scaling[data.labels.indexOf(valueObject.label)];
    }
});

Fiddle - http://jsfiddle.net/cq1q5wuf/

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.