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

4 posts, 0 answers
  1. Sean
    Sean avatar
    2 posts
    Member since:
    Jun 2017

    Posted 29 Jun Link to this post

    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?

     

  2. Stefan
    Admin
    Stefan avatar
    1405 posts

    Posted 03 Jul Link to this post

    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 visualization (charts) and form elements.
  3. Sean
    Sean avatar
    2 posts
    Member since:
    Jun 2017

    Posted 03 Jul Link to this post

    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.

     

  4. Stefan
    Admin
    Stefan avatar
    1405 posts

    Posted 05 Jul Link to this post

    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.
Back to Top