I'm moving from Chartjs to Kendo-ui . (My company has the license)
Home
I'm having some trouble customizing the Radar Chart that I'm trying to use.
Home
1) Remove rows that divide the graph. The cross that would be angleShowLineOut = false in Chartjs .
2) What in Chartjs is scaleLineColor I can not find something equivalent in Kendo-ui to customize the scale color color.
3) I can not customize the colors of the data rows as in Chartjs in the strokeColor property.
Even looking at this documentation giant I have had difficulties ...
Home
Check out this Fiddle .
Here is the code below:
// 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><linkhref="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><scriptsrc="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>