Size of chart vs legend

[David]

I have few charts

Is there a way to align charts/legends to be same size across all graphs?

[Vessy]

Hi David,

You can customize the layout of each chart's legend by implementing a Visual template for the legends. More information and a sample on how to achieve that can be found here:
http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/visual-template

You can also refer the following resource in order to see how to handle the labels in the legend:
http://docs.telerik.com/kendo-ui/api/javascript/drawing/text


Regards,
Vessy
Progress Telerik

[David]

Maybe, i haven't been clear

Essentially, i am trying to format charts presented in first pic to look like second pic

[Vessy]

Hi,

Thank you for the clarification, David.

You can achieve the target behavior by setting the margin of the legend object. Unfortunately, this property is not exposed directly in the RadHtmlChart API, but you can set it through its Kendo UI widget:
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-legend.margin

For example, you can do it in the client-side Load event of the control:

<telerik:RadHtmlChart runat="server" ID="BarChart1" Transitions="true" Width="800px">
    <ClientEvents OnLoad="onLoad" />
    <PlotArea>
        <Series>
            <telerik:BarSeries Name="Product A">
                <Appearance>
                    <FillStyle BackgroundColor="Red" />
                </Appearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="800" />
                    <telerik:CategorySeriesItem Y="200" />
                    <telerik:CategorySeriesItem Y="100" />
                </SeriesItems>
            </telerik:BarSeries>
        </Series>
        <XAxis>
            <Items>
                <telerik:AxisItem LabelText="2003" />
                <telerik:AxisItem LabelText="2004" />
                <telerik:AxisItem LabelText="2005" />
            </Items>
        </XAxis>
    </PlotArea>
    <Legend>
        <Appearance Position="Right" OffsetX="50" OffsetY="100" />
    </Legend>
</telerik:RadHtmlChart>

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Transitions="true" Width="800px">

    <PlotArea>
        <Series>
            <telerik:BarSeries Name="Product A Product A Product A" >
                <Appearance>
                    <FillStyle BackgroundColor="Red" />
                </Appearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="800" />
                    <telerik:CategorySeriesItem Y="200" />
                    <telerik:CategorySeriesItem Y="100" />
                </SeriesItems>
            </telerik:BarSeries>
        </Series>
        <XAxis AxisCrossingValue="0" Color="Black" MajorTickType="Outside" MinorTickType="Outside"
            Reversed="false">
            <Items>
                <telerik:AxisItem LabelText="2003" />
                <telerik:AxisItem LabelText="2004" />
                <telerik:AxisItem LabelText="2005" />
            </Items>
        </XAxis>
    </PlotArea>

    <ChartTitle Text="Sales">
    </ChartTitle>
    <Legend>
        <Appearance Position="Right" OffsetX="50" />

    </Legend>
</telerik:RadHtmlChart>
<script>
    function onLoad(chart, args) {
        chart.get_kendoWidget().setOptions({
            legend: {
                    margin: {
                       right: 110
                    }
            }
        })
    }
</script>

Regards,
Vessy
Progress Telerik

[David]

Hi Vessy,

   I think your suggestion is a interesting and step into right direction.

  Is there a way to control width of "graph" part of the chart?

Thank you

David

[Vessy]

Hi David,

The easiest way to control the width of the graph at the moment is to change the width of the whole chart.

Another possible option is to set margin to the plot area of the chart like demonstrated in the following thread:
http://www.telerik.com/forums/how-to-change-the-size-of-chart#PO1BOD24UE2qmJ0bQJRcPQ

In addition, there is an already files feature request for ability to specify the width of the plot area separately, so you can vote for it in order to increase the item's popularity (it has only 2 votes in the moment of writing):
http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/10172973-specify-the-width-of-the-plot-area

Regards,
Vessy
Progress Telerik

[David]

In post you mentioned i see:

plotArea: {

  margin: 40
}

Other than margin, what other options exposed for plot area?

[Vessy]

Hi David,

All available public members of the plotArea object of the chart are listed in the Client-side API of the Kendo UI chart widget in the following article:
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-plotArea

Regards,
Vessy
Progress Telerik

[David]

I tried to increase legend width by using this article, but nothing worked :(

[David]

Another approach i tried is to set legend to be particular size.

ser.Name = seriesName & "  " increases width of the legend, but it is not very flexible.

is there a way to do something like:

ser.Name = seriesName & "<div style='margin-right:10px;'></div>"

?

[Vessy]

Hi David,

The Series.Name property accept only strings for its value and it is not possible to pass HTML elements to it, but you can consider setting the Legend Labels ClientTemplate like demonstrated here:
http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/appearance-and-styling/legend-settings#client-templates


Regards,
Vessy
Progress Telerik