[Solved] Legend colors do not match column chart colors

[Natalie]

Hello,
I have this code:

           

var chart = new Telerik.UI.RadChart(elementById, {
                dataSource: {
                    data: chart_data,
                    group: { field: "county" }
                },
                series: [
                    {
                        field: 'population',
                        type: 'column',
                        visibleInLegend: true,
                        color: 'color',
                        stack: false,
                        labels: {
                            visible: true,
                            color: 'black',
                            template: "#=dataItem.county#(#=dataItem.population#)"
                        }
                    }
                ],
                valueAxis: {
                    labels: { font: "12pt segoe ui" }
                },
                categoryAxis: {
                    field: 'state',
                    labels: { font: "16pt segoe ui" }
                },
                title: {
                    text: "Click select a bar for more details.",
                    position: "top"
                },
                legend: {visible: true},
                background: 'transparent',
                width: 1700,
                height: 600,
                theme: 'light',
                onseriesclick: myfunction
            });


chart_data = [
{ state: Florida, county: Lee, population: 20000, color: red}
{ state: Florida, county: Marion, population: 12000, color: yellow}
{ state: Florida, county: Polk, population: 5000, color: green}
{ state: Texas, county: Lee, population: 1000, color: red}
{ state: Texas, county: Marion, population: 10000, color: yellow}
{ state: Texas, county: Polk, population: 10900, color: green}]

the graph shows the correct colors (Lee=red, Marion=yellow, Polk=green) but the legend shows
Lee = blue, Marion = red, and Polk = yellow

What am I doing wrong?

Thanks,
Natalie

[Tsvetina]

Hi Natalie,

In short, the colors in the legend correspond to the color of the series as an entity and not to the color of each of its columns. If this does not sound clear, you can read on for a more detailed explanation.

In this scenario the legend displays the group names, so the colors you assign to the columns themselves do not correspond to the colors of the groups. You can visualize that better if you assign more colors to the entries in the data source. For example:

var chart_data = [
        { state: "Florida", county: "Lee", population: 20000, color: "red" },
        { state: "Florida", county: "Marion", population: 12000, color: "yellow" },
        { state: "Florida", county: "Polk", population: 5000, color: "green" },
        { state: "Texas", county: "Lee", population: 1000, color: "blue" },
        { state: "Texas", county: "Marion", population: 10000, color: "orange" },
        { state: "Texas", county: "Polk", population: 10900, color: "purple" }
];

 
In such case you will have 6 columns colored each differently but the groups in the legend are still three.

Furthermore, even in scenarios without grouping, you would have one entry in the legend per series (this is the purpose of the legend). So, if you assign different colors to each column in a single series, you would still have one item in the legend, with one of the default colors.

The solution would be to provide colors for the entire series, not on per column basis. This is achieved by setting the seriesColors property of the chart to a list of colors. In this scenario, with grouping, you will get the exact same look and a legend with corresponding colors:

var chart = new Telerik.UI.RadChart(document.getElementById("chart"), {
    dataSource: {
        data: chart_data,
        group: { field: "county" }
    },
    seriesColors: ["red", "yellow", "green"],
    series: [
        {
            field: 'population',
            type: 'column',
            visibleInLegend: true,
            stack: false,
            labels: {
                visible: true,
                color: 'black',
                template: "#=dataItem.county#(#=dataItem.population#)"
            }
        }
    ],
    valueAxis: {
        labels: { font: "12pt segoe ui" }
    },
    categoryAxis: {
        field: 'state',
        labels: { font: "16pt segoe ui" }
    },
    title: {
        text: "Click select a bar for more details.",
        position: "top"
    },
    legend: { visible: true },
    background: 'transparent',
    width: 1700,
    height: 600,
    theme: 'light'
});

Give this a try and let us know if you have further questions on this matter.

Greetings,
Tsvetina
the Telerik team

[Natalie]

It worked.

I tried using seriesColors prior like this:

     seriesColors="color"

Now I know why it didn't work.  Thank you.

Natalie