Move Labels on Bar Chart with Negative Values

5 posts, 0 answers
  1. Charles
    Charles avatar
    11 posts
    Member since:
    Sep 2013

    Posted 17 Jan 2017 Link to this post

    Hello,

    I have a bar chart (attached) the labels need to be moved outside the chart on the left so they are not covering the bars.

    I have seen this as an issue going back to 2012 in the forums.. Its 2017 so I cant imagine this is still an issue.

    If it is still an issue what is the work around? Is there a hack? I looked to see if I could use CSS but it does not seem so.

    I tried AxisCrossingValue... it moves the bars so they don't line up with the correct X-Axis Labels... so that does not work.

     

    I really need this to work.

    Thanks,

    Charles

     

  2. Charles
    Charles avatar
    11 posts
    Member since:
    Sep 2013

    Posted 17 Jan 2017 Link to this post

    I have seen some of the Margin workarounds and they do not seem to work well.

    If I can't do this then is it possible to just set the color of the bars by a field in my data table?

    I will do absolute values and have a third field in my datatable (1 or 0).

    if 1 then Red bar(negative) if 0 Green bar (positive)

    So the table being set to the data source would be like

    Western Oil / 2 /1 (so 2 is negative thus red)

    Sanders Oil / 3 /0 (so 3 is positive thus green)

    I would prefer to do this programically is possible... 

    Set the datasource then change the colors... but perhaps it can not be done programmically..

    Any help would be great.

  3. Stamo Gochev
    Admin
    Stamo Gochev avatar
    208 posts

    Posted 20 Jan 2017 Link to this post

    Hello Charles,

    As you have already tried positioning the labels with the Margin property, the other option is to implement your own logic about positioning the labels using visuals:

    http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/visual-template

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.labels.visual


    Our Drawing API resources can be used as a reference:

    http://docs.telerik.com/kendo-ui/framework/drawing/overview

    http://docs.telerik.com/kendo-ui/api/javascript/drawing


    Please note that the above suggestions give you a full control over how the labels will be drawn, but this requires additional effort in implementing a custom solution.

    Regarding the question about colors - you can define them based on a condition (in your case the value of the item) as described in our documentation and demo:

    http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/appearance-and-styling/conditional-item-colorization#conditional-item-colorization

    http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/custombarcolor/defaultcs.aspx

    If you want to define the color in the data source, you can just set the ColorField property and add the concrete color values to the data source.

    Regards,
    Stamo Gochev
    Telerik by Progress
    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.
  4. Charles
    Charles avatar
    11 posts
    Member since:
    Sep 2013

    Posted 20 Jan 2017 in reply to Stamo Gochev Link to this post

    For whatever reason I did not understand the ColorField... That worked perfect.

    My negative (made positive) values are now red and positive values are now green.

    Is there a way to just add a legend that says Red box = Negitive, Green box = Positive?

  5. Stamo Gochev
    Admin
    Stamo Gochev avatar
    208 posts

    Posted 20 Jan 2017 Link to this post

    Hi Charles,

    The items in the legend correspond to what is set in the Name (or NameField for data bound scenario) property. You can find more information in the documentation:

    http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/appearance-and-styling/legend-settings

    Note that if both the positive and negative values belong to one and the same series (which appears to be in your case), only one name can be displayed in the legend (so you can't distinguish between them). This is how charts work in general as the idea of the legend item is to show an "overview" information regarding the whole series.

    In this scenario, my suggestion is to create a custom legend as shown in the following demo:

    http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/custombarcolor/defaultcs.aspx

    This legend will not have any client-side functionality, but can be used to distinguish between negative and positive values.

    Regards,
    Stamo Gochev
    Telerik by Progress
    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