Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
anne
1465
igDataChart - creating a completely different looking legend
posted

Hi,

I need to create a legend that looks completely different to the standard legend provided. I have looked at the following post but it has not helped me.

http://es.infragistics.com/community/forums/p/105511/498761.aspx#498761

I am trying to create a legend that looks like the picture I have attached. The colour of each rectangle I will need to set using code but I am not sure how to get the legend to draw in this way by overriding the td\trs of legend.

Any help would be appreciated.

kind regards,
Anne

  • 1465
    Verified Answer
    posted

    Hi

    I thought I would post how I got this working in case anyone needed to do the same. I added this to my series.

      "legendItemTemplate": {
                            render: this.renderLegendItemTemplate
                        }

       renderLegendItemTemplate(renderInfo) {
                
                var $context = renderInfo.context,
                    $color = $("<td>").css("background-color", renderInfo.data.series().actualBrush().fill())
                        .width(30)
                        .height(10),
                    $text = $("<td>").text(renderInfo.data.series().title().substr(0,renderInfo.data.series().title().length));

                $text.addClass("ui-chart-legend-item-text");
                   
                $context.append($text);
                $context.append($color);
                var lux = 1;
                for (var i = 0; i < 2; i++)
                {
                    lux = lux - 0.2;
                    $color = $("<td>").css("background-color", renderInfo.data.series().actualBrush().fill())
                        .width(30)
                        .height(10);
                    $color.css("opacity", lux);
                    $context.append($color);
                       
                }
            }

    I hope this helps someone in the future.

    kind regards,
    Anne