How to apply flat colors effect in Kendo charts

Question

I am using Telerik charts in my project. I am able to change the color of charts but not the style. What i mean by style is - there appears a embossed effect over all the charts(First Image). What i need to apply is flat colors(Second Image). How can i remove gradient effect over charts in all my Kendo charts?

Thanks in advance.

Answer 1

You have to apply Overlay effect. See this Kendo Document

Apply none gradient option and available gradient options are :

• roundedBevel (This is the default gradient option)
• sharpBevel
• none

function createChart() {
    $("#chart").kendoChart({
        title: {
            position: "bottom",
            text: "Share of Internet Population Growth, 2007 - 2012"
        },
        legend: { visible: false },
        chartArea: { background: "" },
        seriesDefaults: {
            labels: {
                visible: true, background: "transparent", template: "#= category #: \n #= value#%"
            }
        },
        series: [{
            type: "pie",
            overlay: { gradient: "none" },
            startAngle: 150,
            data: [{ category: "Asia", value: 53.8, color: "#9de219" },
                { category: "Europe", value: 16.1, color: "#90cc38" },
                { category: "Latin America", value: 11.3, color: "#068c35" },
                { category: "Africa", value: 9.6, color: "#006634" },
                { category: "Middle East", value: 5.2, color: "#004d38" },
                { category: "North America", value: 3.6, color: "#033939" }]
        }],
        tooltip: { visible: true, format: "{0}%" }
    });
}

$(document).ready(createChart);

<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />

<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
<div id="chart" ></div>