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

Size of chart vs legend

10 Answers 156 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Iron
Iron
Veteran
David asked on 06 Jun 2017, 05:24 PM

I have few charts

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

10 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 07 Jun 2017, 02:32 PM
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
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.
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 07 Jun 2017, 03:04 PM

Maybe, i haven't been clear

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

0
Vessy
Telerik team
answered on 12 Jun 2017, 12:28 PM
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
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.
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 13 Jun 2017, 02:55 PM

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

0
Vessy
Telerik team
answered on 15 Jun 2017, 04:08 PM
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
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.
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 15 Jun 2017, 07:53 PM

In post you mentioned i see:

plotArea: {

  margin: 40
}

Other than margin, what other options exposed for plot area?
0
Vessy
Telerik team
answered on 16 Jun 2017, 01:22 PM
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
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.
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 23 Jun 2017, 07:06 PM
I tried to increase legend width by using this article, but nothing worked :(
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 26 Jun 2017, 01:58 PM

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

ser.Name = seriesName & "&nbsp;&nbsp;" 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>"

?

0
Vessy
Telerik team
answered on 28 Jun 2017, 04:03 PM
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
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
Chart (HTML5)
Asked by
David
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Vessy
Telerik team
David
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or