Boxes not aligning on side of legend

3 posts, 0 answers
  1. Dalton
    Dalton avatar
    6 posts
    Member since:
    Jun 2015

    Posted 04 Feb Link to this post

    Hello, I've ran into a problem with my legend. I need the boxes to align to the left side of each of the legend. Here is my code:

     

    legend:{
                    position: "bottom",
                    item: {
                        visual: function (e) {
                            var color = e.options.markers.background;
                            var labelColor = e.options.labels.color;
                            var rect = new kendo.geometry.Rect([0, 0], [150, 100]);
                            var layout = new kendo.drawing.Layout(rect, {
                                alignItems: "right"
                            });

                            var marker = new kendo.drawing.Path({
                                fill: {
                                    color: color
                                },
                                stroke: {
                                    color: color
                                },
                            }).moveTo(40, 0).lineTo(40, 35).lineTo(5, 35).lineTo(5, 0).close();

                            var label = new kendo.drawing.Text(e.series.name, [10, 0], {
                                fill: {
                                    color: labelColor
                                },
                                font: "30px sans-serif",
                            });

                            layout.append(marker, label);
                            layout.reflow()

                            return layout;
                        }
                    }

     

    Any ideas?

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 08 Feb Link to this post

    Hello Dalton,

    In order to avoid the issue you could increase the rect width. For your convenience here is a basic dojo.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Dalton
    Dalton avatar
    6 posts
    Member since:
    Jun 2015

    Posted 08 Feb in reply to Iliana Nikolova Link to this post

    Thank you, it worked.
Back to Top