How to determine the number of edges of radarchart?

Question

I’m using Radarchart of Chart js.. Have that Fiddle working.
Note that in this example the graph is mounted dynamically according to the entered data.

Well, I would like to determine the amount of edges generated, regardless of the values, that is, instead of the four edges that were generated in Fiddle, I would like 10 edges. The result would look like in the image:

In addition to the edges, there is some way to add caption for both the lines and the items in the chart?

Despite the documentation and other settings available, unfortunately I am not as good in English, and even using Translate and making trial and error I could not get the result so required.
Save Stackoverflow in English!
Could someone help me?

Answer 1

I got everything in that Fiddle. Trial and error.
Follow the full code:

var radarChartData = {
		labels: ["Eating", "Drinking", "Sleeping", "Designing"],
    datasets: [
			{
				label: "My First dataset",
				fillColor: "rgba(220,220,220,0)",
				strokeColor: "rgba(220,220,220,1)",
				pointColor: "rgba(220,220,220,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(220,220,220,1)",
				data: [2,2,2,2]
			},
			{
				label: "My Second dataset",
				fillColor: "rgba(151,187,205,0)",
				strokeColor: "rgba(151,187,205,1)",
				pointColor: "rgba(151,187,205,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(151,187,205,1)",
				data: [8,8,8,8]
			}
		]
	};

	window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
            responsive: true,
        //scaleShowLabels : true,
        animationSteps: 80,
        animationEasing: "easeOutQuart",
        scaleOverride: true,
        scaleSteps: 10,
        scaleStepWidth: 1,
        scaleStartValue: 0,
        angleShowLineOut : false,
        scaleLineColor: "rgba(0, 0, 0, 1)",
        
        legendTemplate : '<% for (var i=0; i<datasets.length; i++) { %>'
                    +'<h3 style=\"color:<%=datasets[i].strokeColor%>\">.'
                    +'<% if (datasets[i].label) { %><%= datasets[i].label %><% }%>'
                +'<% } %></h3>'
        });

document.getElementById("legendDiv").innerHTML = window.myRadar.generateLegend();

#canvas-container {
        width: 100%;
        text-align: center;
    }

    canvas {
        display: inline;
    }

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<div id="canvas-container">
            <canvas id="canvas"></canvas>
        </div>
<div id="legendDiv"></div>

For most options, I used the global settings.
In the matter of a static scale, just change the option scaleOverride which by default comes false for true, and this will require you to specify some other values, such as scaleSteps (How far does your scale go? in my case 10, then scaleSteps = 10), scaleStepWidth (how much will be increased, in my case 1 in 1), and finally scaleStartValue determining the starting value.

To the legend, I based myself in that reply, where I just changed the legendTemplate lineColor for strokeColor, because the link in question solves the problem for another type of chart.