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

Problem formatting Htmlchart

4 Answers 138 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Lee asked on 08 Jan 2015, 09:29 PM
Hi, I am having a problem formatting a HtmlChart. Specifically I want to reduce spacing/padding or margins in the the axis.I also want to hide the borders (lines) of the x and y axis but cant seem to find a way to do this. Below is aspx. I have also attached image of how it looks now (current). And how I want it to look (desired). I want the horizontal bars to have almost no gap (eg 5 px or so) so that its more compact. How can I accomplish this do I have to hack w css? If so what are the relevant properties? Thanks

<telerik:RadHtmlChart runat="server" ID="rcRatings" Height="150px"
Width="200px">
<PlotArea>
<Series>
<telerik:BarSeries DataField="rating" Name="Rating">
<Appearance >
<FillStyle BackgroundColor="Orange" />
</Appearance>
<LabelsAppearance Visible="false">
</LabelsAppearance>
</telerik:BarSeries>
</Series>
<XAxis DataLabelsField="title">
<MinorGridLines Visible="false"></MinorGridLines>
<MajorGridLines Visible="false"></MajorGridLines>
</XAxis>
<YAxis Step="1">
<MinorGridLines Visible="false"></MinorGridLines>
<MajorGridLines Visible="false"></MajorGridLines>
<LabelsAppearance Visible = "false" />
<TitleAppearance Visible = "false" />
</YAxis>
</PlotArea>
<Legend>
<Appearance Visible="false"></Appearance>
</Legend>
<ChartTitle>
<Appearance Visible="False" />
</ChartTitle>
</telerik:RadHtmlChart>

4 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 09 Jan 2015, 07:18 AM
Hello Lee,

Please refer to the Gap and Spacing help article for details on how to control the distance between the items.

As for hiding only the axes without the labels you can set a width of 0. For example:
<XAxis Width="0">
    <Items>
        <telerik:AxisItem LabelText="1" />
        <telerik:AxisItem LabelText="2" />
        <telerik:AxisItem LabelText="3" />
    </Items>
</XAxis>

Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Lee
Top achievements
Rank 1
answered on 09 Jan 2015, 02:41 PM
Danail, my BarSeries or ChartSeries dot not have any properties for Gap or Spacing. eg.

Type 'Telerik.Web.UI.BarSeries' does not have a public property named 'Gap'.
Type 'Telerik.Web.UI.BarSeries' does not have a public property named 'Spacing'.

I am using version 2012.2.912.35

Unfortunately I don't have any control over the environment in terms of the dll versions etc. Is there anything I can do similar in my version?

Thanks
Lee
0
Danail Vasilev
Telerik team
answered on 12 Jan 2015, 01:50 PM
Hello Lee,

Yes, you can set the properties through the kendoObject, as illustrated in this feedback item.

Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Lee
Top achievements
Rank 1
answered on 12 Jan 2015, 03:12 PM
Danail, that seems to have done the trick and I can certainly make this work.

Thank you!

Lee
Tags
Chart (HTML5)
Asked by
Lee
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Lee
Top achievements
Rank 1
Share this question
or