This is a migrated thread and some comments may be shown as answers.

Chart Legend - reduce margin/padding

2 Answers 302 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Kindred
Top achievements
Rank 1
Kindred asked on 20 Jul 2017, 12:29 AM

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 Answers, 1 is accepted

Sort by
0
Kindred
Top achievements
Rank 1
answered on 20 Jul 2017, 04:18 AM

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.

0
Stamo Gochev
Telerik team
answered on 21 Jul 2017, 12:28 PM
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.
Tags
Charts
Asked by
Kindred
Top achievements
Rank 1
Answers by
Kindred
Top achievements
Rank 1
Stamo Gochev
Telerik team
Share this question
or