Custom Color Legend

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'
                    }
                }
            });
        }