Chart Legend - reduce margin/padding

3 posts, 0 answers
  1. Kindred
    Kindred avatar
    2 posts
    Member since:
    May 2017

    Posted 19 Jul Link to this post

    Hi,

    I have a chart with big checkboxes for mobile. 

    Unfortunately it takes a lot of space on my chart so I'd like to reduce the gap between each legends. (see screenshot).

    I tried to change legend.label.margin = 0 and legend.label.padding = 0, without success.

     

    The code to generate my legend looks like this:

    "legend": {
                        "position": "bottom",
                        "labels": {
                            "color": "#5d707c",
                            "font": title_legend_font_size,
                            "margin": 0,
                            "padding": 0,
                        },
                        "item": {
                            visual: function(e) {
                                var color = e.options.markers.background;
                                var labelColor = e.options.labels.color;
                                var rect = new kendo.geometry.Rect([0, 0], [350, 100]);
                                var layout = new kendo.drawing.Layout(rect, {
                                    spacing: 5,
                                    alignItems: "center"
                                });
                                var cbSymbol = e.active ? "☑" : "☐";
                                var cb = new kendo.drawing.Text(cbSymbol, [0, 0], {
                                    fill: {
                                        color: labelColor
                                    },
                                    font: checkbox_font_size
                                });
                                var defaultVisual = e.createVisual();
                                layout.append(cb, defaultVisual);
                                layout.reflow()
                                return layout;
                            }
                        }
                    },

     

  2. Kindred
    Kindred avatar
    2 posts
    Member since:
    May 2017

    Posted 19 Jul in reply to Kindred Link to this post

    Sorry there doesn't seem to be any edit option.
    Just to clarify what I meant is to reduce the gap between each labels of the legend.

    So the whole legend container would be smaller.

  3. Stamo Gochev
    Admin
    Stamo Gochev avatar
    186 posts

    Posted 21 Jul Link to this post

    Hi Kindred,

    What I can suggest is to decrease the value of the "checkbox_font_size" variable as it creates a larger box for the legend items. The margin/padding properties won't work in this case as they apply to the built-in visual, but the checkboxes are new elements.

    Regards,
    Stamo Gochev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top