Space between Legend Markers

3 posts, 0 answers
  1. Metallica
    Metallica avatar
    3 posts
    Member since:
    Feb 2015

    Posted 21 Nov 2016 Link to this post

    Hi, im trying everything to create some space (or margin) between Legend´s markers, but i can´t do that...

    I attach a picture of my problem. I have a green and red legend Markers. They are too close from each other...how can i have some space between them ??

    There´s any way to do that? Javascript? jQuery ?

    Thanks!

     

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3824 posts

    Posted 22 Nov 2016 Link to this post

    Hi,

    Here is one way to do this via the underlying Kendo chart widget API (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-legend.labels.margin):

    <script>
        function onChartLoad(sender, args) {
            var kChartLegend = sender.get_kendoWidget().options.legend;
            kChartLegend.labels.margin = {};
            kChartLegend.labels.margin.right = 50;
            sender.get_kendoWidget().setOptions({legend: kChartLegend});
        }
    </script>
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">
        <ClientEvents OnLoad="onChartLoad" />
        <PlotArea>
            <Series>
                <telerik:BarSeries Name="first">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="1" />
                    </SeriesItems>
                </telerik:BarSeries>
                <telerik:BarSeries Name="second">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="1" />
                    </SeriesItems>
                </telerik:BarSeries>
            </Series>
        </PlotArea>
        <Legend>
            <Appearance Position="Bottom">
            </Appearance>
        </Legend>
    </telerik:RadHtmlChart>

    If you would like to see such properties for the legend items (there are padding and margin properties for the entire legend), I suggest you add that as a feature request to our feedback portal: https://feedback.telerik.com/project/108.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  3. Metallica
    Metallica avatar
    3 posts
    Member since:
    Feb 2015

    Posted 22 Nov 2016 Link to this post

    Thank you Marin! it worked perfectly!
Back to Top