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

Moving Labels For Category Axis To Left Align On Positive/Negative Bar Charts

3 Answers 284 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 1
Sean asked on 29 Jun 2017, 08:46 AM

Hi,

I am looking to use a bar chart with both positive and negative values.

This seems to work however the Labels for the Category Axis is obscured by the bars (see image "chart-wrong").

I have found a workaround to the issue by adding a Right Margin to the Labels (see image "chart-correct").

However this is not a solution. When the data set changes (which will be on a regular bases) the Labels go back to not being left aligned.

Is there a permanent solution to this issue?

 

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 03 Jul 2017, 05:35 AM
Hello Sean,

Currently, using padding or margin is the only option to reposition the labels in this scenario. 

When the data can vary, I can suggest using the setOptions method of the Chart to set new padding or margin dynamically based on the data:

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#methods-setOptions

Let me know if you need additional information on this matter.

Regards,
Stefan
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 (charts) and form elements.
0
Sean
Top achievements
Rank 1
answered on 03 Jul 2017, 09:01 AM

Hi Stefan,

Firstly thank you for your response.

Correct me if i'm wrong but with the suggested solution you would need to know the data set range in order to make changes to the margin with the setOptions method.

E.g. 

if(maxValue > 10)

setOptions(//margin arg)

else if(maxValue < 10)
setOptions(//margin arg)

 

If that's the case, this wouldn't be a solution for us as we require the chart to align the Category Axis without having predefined attributes as we do not know the data ranges that will be used within the chart.

 

0
Stefan
Telerik team
answered on 05 Jul 2017, 07:55 AM
Hello Sean,

This scenario will require dynamic calculations to determine the padding value. For example:

var devider = 1.4
var paddingValue = maxValue / devider
chart.setOptions({categoryAxis:{labels:{padding:{padding:paddingValue}}}})

I do understand that this will require an additional custom code, but currently, this is the supported approach.

I can also suggest submitting a feature request, and based on its popularity we may provide a built-in option to automatically position the labels:

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/category/46450-kendo-ui-dataviz

Regards,
Stefan
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
Asked by
Sean
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Sean
Top achievements
Rank 1
Share this question
or