width property for bar/column series in Html Chart

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 22 Jan 2020 16:31 by ADMIN

Satish

Created on: 24 Jun 2015 07:36

Category: HtmlChart

Type: Feature Request

width property for bar/column series in Html Chart

In RadHtmlChart there is no property to specify Width for Bar/Column series. It automatically calculates series width based on chart width, number of series, number of items within series, gap and spacing, etc.,
If there is more than one bar/column chart in single page, there is no way to show Bar/Column series of exact width in all chart to make page consistent.

1 comment

ADMIN

Rumen

Posted on: 22 Jan 2020 16:30

Hello Satish,

The chart uses all available space and distributes it evenly among the series, then among their items. So, there is no fixed pixel width setting for the bar size, but a percentage value that determines the width of bars and gaps between them. You can read more about how this works in the following article: https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/appearance-and-styling/gap-and-spacing.

One option I can suggest you try is the following custom visual approach: https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/fixed-bar-size. Here's how to use a visual in the RadHtmlChart wrapper: https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/visual-template. Here is an example I prepared for your convenience:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="200px" Height="200px">

<PlotArea>

<Series>

<telerik:BarSeries>

<SeriesItems>

<telerik:CategorySeriesItem Y="1" />

<telerik:CategorySeriesItem Y="2" />

</SeriesItems>

</telerik:BarSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Width="200" Height="200px">

<PlotArea>

<Series>

<telerik:BarSeries>

<Appearance Visual="customVisual"></Appearance>

<SeriesItems>

<telerik:CategorySeriesItem Y="1" />

<telerik:CategorySeriesItem Y="2" />

</SeriesItems>

</telerik:BarSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart3" Width="200" Height="400px">

<PlotArea>

<Series>

<telerik:BarSeries>

<Appearance Visual="customVisual"></Appearance>

<SeriesItems>

<telerik:CategorySeriesItem Y="1" />

<telerik:CategorySeriesItem Y="2" />

</SeriesItems>

</telerik:BarSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

<script>

var BAR_SIZE = 10;

function customVisual(e) {

//create the default visual

var visual = e.createVisual();

//scale it so that it has the predefined size

visual.transform(kendo.geometry.transform().scale(1, BAR_SIZE / e.rect.size.height, e.rect.center()));

return visual;

}

</script>

You can find more info at https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.width and https://www.telerik.com/forums/increase-bar-width-in-a-stacked-bar-chart#Xs4DMOxWRkGV1hPDHJTH1w.

Best Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.