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.

Erminiaerminie

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>

Disloyalty

Answer 2

Please try with the below code snippet. To remove gradient effect you have to set 'overlay: null' in chart.

<div id="chart"></div>
<script>
    var data = [
       {
           "source": "Hydro",
           "percentage": 22,
           "explode": true
       },
       {
           "source": "Solar",
           "percentage": 2
       },
       {
           "source": "Nuclear",
           "percentage": 49
       },
       {
           "source": "Wind",
           "percentage": 27
       }
    ];

    $(document).ready(function () {
        $("#chart").kendoChart({
            title: {
                text: "Break-up of Spain Electricity Production for 2008"
            },
            legend: {
                position: "bottom"
            },
            dataSource: {
                data: data
            },
            seriesDefaults: {
                overlay: {
                    gradient: null
                }
            },
            series: [{
                type: "pie",
                field: "percentage",
                categoryField: "source",
                explodeField: "explode"
            }],
            seriesColors: ["#03a9f4", "#ff9800", "#fad84a", "#4caf50"],
            tooltip: {
                visible: true,
                template: "${ category } - ${ value }%"
            }
        });
    });

</script>

Let me know if any concern.

Curve