0
I’m changing from the Chartjs to the Kendo-ui. (My company has the license)
I’m having some trouble customizing the Radar Chart I’m trying to use.
1) Remove lines that divide the graph. The cross that would be the angleShowLineOut = false in the Chartjs.
2) What in Chartjs is scaleLineColor I can’t find anything equivalent in the Kendo-ui to customize the color of scale line.
3) I cannot customize the colors of data lines as in the Chartjs on the property strokeColor.
Even looking that documentation giant I’ve been having difficulties...
Look at this one Fiddle.
Follow code below too:
// Chartjs
var radarChartData = {
labels: ["Item1", "Item2", "Item3", "Item4"],
datasets: [
{
label: "Linha1",
fillColor: "rgba(220,220,220,0)",
strokeColor: "red",
pointColor: "red",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [2,2,2,2]
},
{
label: "Linha2",
fillColor: "rgba(151,187,205,0)",
strokeColor: "green",
pointColor: "green",
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>',
//Number - Pixel width of the angle line
angleLineWidth : 100,
//String - Point label font declaration
pointLabelFontFamily : "Arial",
//String - Point label font weight
pointLabelFontStyle : "normal",
//Number - Point label font size in pixels
pointLabelFontSize : 20,
//String - Point label font colour
pointLabelFontColor : "black",
// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value %>",
// String - Template string for multiple tooltips
multiTooltipTemplate: "<%= datasetLabel %> : <%= value %>",
});
document.getElementById("legendDiv").innerHTML = window.myRadar.generateLegend();
//********************************************************************
// Kendo-ui
function createChart() {
$("#chart").kendoChart({
renderAs: "canvas",
legend: {
position: "bottom"
},
seriesDefaults: {
type: "radarLine"
},
series: [{
colorField: "valueColor",
data: [
{
name: "Linha 1",
data: [2, 2, 2, 2],
valueColor: "red"
},{
name: "Linha 2",
data: [4, 4, 4, 4],
valueColor: "green"
}]
}],
categoryAxis: {
categories: ["Item1",
"Item2",
"Item3",
"Item4"]
},
valueAxis: {
min: 0,
max: 10,
majorUnit: 1,
visible: false
},
tooltip: {
visible: true,
format: "${0}"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);#canvas-container {
width: 100%;
border: 2px solid #8AC007;
background-color: white;
}
canvas {
display: inline;
background-color: white;
}
#legendDiv {
text-align: left;
}
#chart{
width: 100%;
height: 400px;
border: 2px solid #8AC007;
background-color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common-material.min.css" rel="stylesheet"/>
<link href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.material.min.css" rel="stylesheet"/>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<div class="demo-section k-content" id="chart-container">
<div id="chart"></div>
</div>
<br/>
<div id="canvas-container">
<canvas id="canvas"></canvas>
<div id="legendDiv"></div>
</div>