Move Labels on Bar Chart with Negative Values

[Charles]

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

 

[Charles]

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.

[Stamo Gochev]

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

[Charles]

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?

[Stamo Gochev]

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