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

Minimum column width for dynamic number of columns

1 Answer 263 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 08 Jul 2014, 01:02 PM
Hi, I would like to know how to set the minimum column width for a dynamic number of categories for a stacked bar chart.

The problem is that  when the chart is resized below a certain height then the category axis labels become bunched together and the bar widths become smaller than the series label text therefore the text no longer fit inside the bars, see attached image.

The chart is resized via the splitter.

Setting the gap and spacing properties only seems to work if you have a chart with a fixed amount columns, not columns that could be from 0 - n.

Effectively the minimum bar width should not be less than the size of the font used for the series labels.

I have tried preventing the chart from further reducing in height base on current height / number of columns, but this solution is glitchy depending on how much or how quick the splitter is moved.

How else can I set the minimum bar widths or reliably prevent the chart from resizing based on the current chart dimension and number of columns?

Andy

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 10 Jul 2014, 11:04 AM
Hi Andy,

There is no a built-in option for setting width / min-width to the bars. As possible workarounds I would suggest:
- Set gap / spacing values dynamically depending on the number of series. For this purpose you can use the setOptions method: 
//get reference to the chart widget
var chart = $("#chart").data("kendoChart");
//set gap / spacing options
chart.setOptions({seriesDefaults: {gap: 2, spacing: 2}});
- Dynamically set chartArea.height
//get reference to the chart widget
var chart = $("#chart").data("kendoChart");
//set chartArea height
chart.setOptions({chartArea: {height: 200}});

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Andy
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or