Make same colors on 2 charts with legend

[Egor]

Hello. My target is make 2 charts with same colors of the items. I make this

<link rel="stylesheet" href="/analyticsRes/jsCharts/css/kendo.common.min.css" />
    <link rel="stylesheet" href="/analyticsRes/jsCharts/css/kendo.default.min.css" />
    <link rel="stylesheet" href="/analyticsRes/jsCharts/css/kendo.default.mobile.min.css" />
    <script src="/analyticsRes/jsCharts/js/kendo.all.min.js"></script>

<div id="chart-top" style="width:600px;height:350px;"></div>

<script>
$(function() {

    $('.top-td').closest('table').attr('id', 'top-table');
    $('.top-td').closest('tr').addClass('top-tr');
    $('.top-td').closest('.CVView').css('display', 'none');
    $('#top-table colgroup').remove();
    $('#top-table .PTColSizingCell').remove();

    $('#top-table tr').each(function() {
        if ($(this).hasClass('top-tr')) {} else {
            $(this).remove();
        }
    });

    var TopList = new Array();
    var tr = document.getElementById("top-table").getElementsByTagName("tr");
    for (var i = 0; i < tr.length; i++) {
        var td = tr.item(i).getElementsByTagName("td");
        TopList[i] = new Object();
        for (var j = 0; j < td.length; j++) {
            if (j == 0) {
                TopList[i]["category"] = td.item(0).innerText;
                TopList[i]["name"] = i;
            }
            if (j == 1) {
                TopList[i]["value"] = parseFloat(td.item(1).innerText.replace(/,/, '.'));
            }
            if (j == 2) {
                var id = td.item(2).innerText;
                if (id === "K_22") { TopList[i]["color"] = "#3f51b5" }
                if (id === "K_21") { TopList[i]["color"] = "#03a9f4" }
                if (id === "K_01") { TopList[i]["color"] = "#4caf50" }
                if (id === "K_11") { TopList[i]["color"] = "#f9ce1d" }
                if (id === "K_13") { TopList[i]["color"] = "#ff9800" }
                if (id === "K_88") { TopList[i]["color"] = "#ff5722" }
                if (id === "K_12") { TopList[i]["color"] = "#56ff22" }
                if (id === "K_10") { TopList[i]["color"] = "#e222ff" }
                if (id === "K_31") { TopList[i]["color"] = "#8d22ff" }
            }
        }
    }


    TopList.sort(function(a, b) {
        if (a.value < b.value) {
            return 1;
        }
        if (a.value > b.value) {
            return -1;
        }
        return 0;
    });

console.log(TopList);

    $("#chart-top").kendoChart({
        title: "Предложений по предприятиям",
        theme: "Material",
        dataSource: {
            data: TopList,
            group: {
                field: "name"
            },
            sort: {
                field: "category",
                dir: "asc"
            }
        },
        legend: {
            visible: true,
            position: "bottom"
        },
        seriesDefaults: {
            type: "column",
            gap: 0.1,
            spacing: 0.2
        },
        series: [{
            field: "value",
            colorField: "color",
            labels: {
                font: "14px Arial,Helvetica,sans-serif",
                template: "#= value #",
                visible: true
            },
            name: "#: group.items[0].category #"
        }],
seriesColors: ["#3f51b5", "#03a9f4", "#4caf50", "#f9ce1d", "#ff9800", "#ff5722", "#56ff22", "#e222ff", "#8d22ff"],
        valueAxis: {
            majorGridLines: {
                visible: false
            },
            visible: false,
        },
        categoryAxis: {
            majorGridLines: {
                visible: false
            },
            line: {
                visible: false
            },
            visible: false
        },
        tooltip: {
            visible: true,
            template: "#= series.name #: #= value #"
        }
    });
});
</script>

for one chart and the same code for the second chart. Finally the items of the charts has the same colors, but the legend has diffrent colors. How i can solve my problem? Thanks

[Egor]

i make a dojo for example

http://dojo.telerik.com/OXACo

[Iliana Dyankova]

Hi Egor,

The difference in the colors is due to the following:
- By design the chart legend shows the series colors;
- The colorField option is intended for setting color to a particular item in the series (not to the entire series).

Hence to achieve the expected result remove the colorField definitions (and the "color" fields) and use the seriesColors array. For your convenience here is the modified dojo.

Regards,
Iliana Nikolova
Progress Telerik