Custom Color Legend

[Ryan]

Hi,

I created a heatmap with custom color combination like the code below. My question is, how can I translate it as legend? Thank you.

function createChart() {
            $("#heatmap").kendoChart({
                dataSource: {
                    data: data
                },
                series: [{
                    name: 'Heatmap of IHR scores across regions',
                    type: 'heatmap',
                    xField: 'CapacityNo',
                    yField: 'Region',
                    field: 'AvgScore',
                    tooltip: {
                        visible: true,
                        template: "<b>#=dataItem.Region# - C#=dataItem.CapacityNo# : #=dataItem.AvgScore#</b>"
                    },
                    color: function(rec){
                        if (rec.dataItem.AvgScore > 80) {
                            return "#619621";
                        }
                        if (rec.dataItem.AvgScore > 60) {
                            return "#7cac2b";
                        }
                        if (rec.dataItem.AvgScore > 40) {
                            return "#f9c000";
                        }
                        if (rec.dataItem.AvgScore > 20) {
                            return "#fab000";
                        }
                        return "#de3a2c";
                    }
                }],
                legend: {
                    position: "bottom"
                },
                xAxis: {
                    labels: {
                        rotation: 'auto'
                    }
                }
            });
        }

[Nikolay]

Hi Ryan,

You can modify colors for the different legend items with the following properties:

• legend. background - The background color of the legend
• legend.item.area.background - The background color of the legend item.
• legend.labels.color - The text color of the labels. 

Dojo demo: https://dojo.telerik.com/IRaQesit

All Heatmap API properties you can find at the below link:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart

Regards,
Nikolay
Progress Telerik