CODEWITHSUNDEEP
javascriptchart.js
Kyler Phillips
Kyler Phillips

Reputation: 61

Add custom data scale to Chart.js

I'm using a basic chart in Chart.js - I'd like to know if it would be possible to use a custom scale on my axis, so for example I want my data points to be plotted on a 0-10 data scale. Is this possible?

<canvas id="myChart" width="150" height="150"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ["Staying well", "Looking after yourself", "Where you live", "Feeling safe and being listened to", "Making decisions and managing money", "How you feel"],

        datasets: [{
            label: "Careplan",
            backgroundColor: "rgba(179,181,198,0.2)",
            borderColor: "rgba(179,181,198,1)",
            pointBackgroundColor: "rgba(179,181,198,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(179,181,198,1)",
            data: [5, 8, 9, 4, 6, 6, 5]
        }]
    },
});
</script>

Upvotes: 1

Views: 1359

Answers (1)

anothershrubery
anothershrubery

Reputation: 20993

Check out my question and answer HERE

You need to set the scaleSteps,scaleStepWidth and scaleStartValue. In the above example it is: 

scaleSteps: 4,
scaleStepWidth: 5,
scaleStartValue: 0

Which added to a total of 20 with 4 lines through. You can play about with these values to get your desired effect.

Upvotes: 2

Related Questions