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

Move Labels on Bar Chart with Negative Values

4 Answers 97 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Charles
Top achievements
Rank 1
Charles asked on 17 Jan 2017, 10:42 AM

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

 

4 Answers, 1 is accepted

Sort by
0
Charles
Top achievements
Rank 1
answered on 17 Jan 2017, 12:40 PM

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.

0
Stamo Gochev
Telerik team
answered on 20 Jan 2017, 07:58 AM
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.
0
Charles
Top achievements
Rank 1
answered on 20 Jan 2017, 08:44 AM

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?

0
Stamo Gochev
Telerik team
answered on 20 Jan 2017, 12:07 PM
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.
Tags
Chart (HTML5)
Asked by
Charles
Top achievements
Rank 1
Answers by
Charles
Top achievements
Rank 1
Stamo Gochev
Telerik team
Share this question
or