Category Axis labels issue

[Venkatesh]

Hi,
i am using kendo ui stacked column chart ,
the series data  contains some negative values, due that category axis labels moving up.
so please resolve my issue
for more info please see attached picture
thanks in advance

[André]

Hello,
I have the same problem, with the negative values in the bar char.
I try searched in the documentation, but i dont found the solution.
Att,

[DerekAlfonso]

Hi,

I'm also having the same issue, is there any resolution in the new beta?

Thanks

[T. Tsonev]

Hello,

The axis labels are positioned next to the axis. We don't provide an option to move the labels to the bottom, but you can move the whole axis there:

valueAxis: {
    axisCrossingValue: -4
}

This is similar to how MS Excel handles the problem.

We've noticed that we do not handle stacked charts correctly, so this won't work for them. We'll start working on a fix right away.

Regards,
Tsvetomir Tsonev
the Telerik team

[Dhatchana]

axisCrossingValue is working good.
Thank you  team..

[Chamin]

Hi,
Step1:
I have a chart with negative and positive values. without axis move it look likes,
valueAxis: [{
                    title: { text: "Sales" },
                    plotBands: [{
                        from: 0,
                        to: -40000,
                        color: "#F7F2BB"
                    }]



Step 2: I added the property as you said. Then it looks like ,

valueAxis: [{
                    title: { text: "Sales" },
                    axisCrossingValue: -40000,
                    plotBands: [{
                        from: 0,
                        to: -40000,
                        color: "#F7F2BB"
                    }]



Step3:
Now I changes the property as follows,
valueAxis: [{
                    title: { text: "Sales" },
                    axisCrossingValue: [-40000, 40000],
                    plotBands: [{
                        from: 0,
                        to: -40000,
                        color: "#F7F2BB"
                    }]

then chart looks like,


So actually these properties are working great if we have a line and scatter charts.
But it looks wired when we have a bar charts (look step2).
Actually my requirement is to have chart like in first step and labels should be place in botoom of the chart as step 2/3.

Please help me to do this.

[T. Tsonev]

Hello,

Thank you for your feedback. We'll try to enable the second behavior (bars starting from 0) for the Q3 release. We'll follow up with more details when we're ready.

For the moment, you can tweak the axis labels margins in order to move them outside. See http://jsbin.com/ahavog/3/edit for a demo.

I hope this helps.

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Chamin]

Dear Tsonev ,

Thanks for the prompt support and worker-round.

Thanks & Best Regards,
Chamin

[Joel]

Hi Tsvetomir,

I'm running into a similar situation where, in the case of negative values, I would like to keep the x and/or y axes where they are but have the labels render at the bottom and/or left of the chart. From what I've read it sounds like this isn't possible, or only as a workaround by setting margins.  Is this still the case, and if so are there any plans to add support for this?

Also, was the behavior you mentioned for 2012 Q3 (bars starting from 0) added, or if not, planned for a pending release?

Thanks!
--Joel

[T. Tsonev]

Hi,

We don't have a dedicated option for positioning the labels at the outer edges. We can now offer an alternative that doesn't rely on guessing pixel sizes. It works by adding a secondary category axis (new feature) that is only used to show the labels: http://jsbin.com/ahavog/61/edit

This approach is more flexible, but might prove to be an overkill for such a simple task. We'll consider a dedicated option as well.

The bars now render from the 0 point (or closest) regardless of category axis position.

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Joel]

Thanks Tsvetomir! I think that pretty much gets me going.

One minor thing I did notice is that if I have multiple Y value axes with different ranges the zero values no longer line up, for instance if one axis has a range from -10 to 10 and the other has a range from, say, -4 to 8, 0 on the first axis lines up with 2 on the second.  

This is a change from at least v2012.2.710, where the axes would adjust vertically so the 0s were aligned. This made the axes look off kilter but if you were plotting columns positive and negative they would all be at the same horizontal position. Do you know if there is a way to configure the charts to get back to this behavior?  


Thanks!
--Joel

[T. Tsonev]

Hi,

Thank you for reporting this problem. This change was intentional, but we failed to foresee this particular scenario.

There's no way to get the old behavior with the current version. We'll try to figure out a way to make this possible.

Apologies for the caused inconvenience.

Regards,
Tsvetomir Tsonev
the Telerik team

[Ryan]

Using a secondary category axis works, but it breaks the seriesClick handler if your code needs to detect what category was clicked (e.category will be undefined). To workaround that issue, you need to make sure to define your categories in the default axis (in addition to the secondary axis), and then make them hidden, like this:

categoryAxes: [{
                      // Default axis, no labels. 
                     // But be sure to define the categories if you want seriesClick e.category  to be defined.
                       categories: ["A", "B", "C"],
                       labels:{visible:false}
}

See the example here:
http://jsbin.com/uwejij/1/edit

[T. Tsonev]

Hello,

Thanks for the heads-up Ryan. We'll try to fix this problem.

Kind regards,
Tsvetomir Tsonev
the Telerik team

[IT Dept]

Hi, Do you have a specific algorithm to calculate the value axis ranges?

I'd like to calculate the minimum value for the axis so I can use it as a value for the axisCrossingValue option.

Thanks

[IT Dept]

I released that if I do this:

valueAxis: {
                    axisCrossingValue: -9007199254740992,
                    labels: {
                        format: "€{0:N0}"
                    }
                }

It pushes the crossing value to the bottom always. Obviously because I will never reach that value :)

[Kevin]

The workaround for setting axis crossing value to negative does not seem effective in my case.

When there is a data point with a negative value and another data point with value = 0 a bar is rendered for the 0 value?  (see attachment: The green bars are both value=0).

Another issue, positive values (see second orange bar) do not start at 0?

Here are the data points since I didn't show the labels:
  Period To Date - Actual (orange #1)   = -1100.00
  Period To Date - Budget (green #1) =           0.00
  Year To Date - Actual  (orange #2)   =     2700.00
  Year To Date - Budget (green #2)  =              0.00

Also I actually want the axis to appear at 0 to have a clearer separation between positive and negative (important for financials reporting).  Well this probably wouldn't be a big issue if the positive bars started at 0?

Is there any way to resolve this? 

[T. Tsonev]

Hi,

The bars will indeed extend from the axis to the designated value. The behavior you're seeking is more like a range bar (currently unsupported) that is drawn between two absolute values.

I wonder if using a secondary axis for the labels is a viable approach for you?

       valueAxis: {
          // Keeps the default axis at the 0 crossing point
          // and moves the "label" axis to the left
          axisCrossingValues: [0, -Infinity]
        },
        categoryAxes: [{
          labels:{
            visible:false
          }
        }, {
          categories: ["Period To Date", "Year To Date"],
          line: {
            visible: false
          }
        }]

-- Live demo --

I hope this helps.

Regards,
T. Tsonev
Telerik

[Kevin]

Thank you T. Tsonev,

Your solution worked perfectly.  By hiding the labels on the category axis and creating a secondary axis for the labels outside the charting area solved the issue.

Might I suggest that the default behavior should be that the category axis labels are drawn outside the charting area as demonstrated here so that it would support negative values more easily?

Thanks again for your help.

[T. Tsonev]

Hello,

I agree that the two-axis approach a bit cumbersome. I guess we can get away with a simpler solution - an option that specifies that the labels should be positioned outside the chart.

We'll consider this feature for our future releases. Thank you for your feedback.

Regards,
T. Tsonev
Telerik

[Ciaran]

Hi,

I am trying to ensure that my category labels appear underneath my chart even with negative values and have found this forum post. I have achieved this in this jsbin http://jsbin.com/comeqe/edit?html,output

However, once I add the second category axis in the vertical lines in my chart disappear. Try commenting out the first category axis as noted in the jsbin - the vertical lines appear but the labels are now incorrectly placed. 

Can you show me how to place the labels at the bottom (without resorting to padding) and have the vertical lines appear also?

Also, can you tell me if having the category labels appear aat the bottom of the chart is a feature planned for kendo data visualization?

 Thanks,

Ciaran

[T. Tsonev]

Hello,

The vertical lines visibility will follow the visibility of the main line. You need to set its visibility explicitly:
    majorGridLines: {
       visible: true
   }

See the updated snippet.

Regards,
T. Tsonev
Telerik

 

 

[Aztec Web Team]

Hi guys,

Have you guys implemented that idea where there is a setting to specify that labels should be positioned outside the chart?

 

Thanks

[T. Tsonev]

Hello,

No, the suggested workaround is still the recommended option to achieve that.

Please, file a request for this feature on our UserVoice portal if you have minute.
This will help us gauge the overall interest and prioritize.

Regards,
T. Tsonev
Telerik

 

 

[Sunil]

Hi,

I have the same issue for Radar Column chart which is similar to this sample i created 

http://dojo.telerik.com/@Sunil/aFowI

I tried adding " " for alternate labels, it works on UI but if the image is exported to PDF/Excel then we can see   as a text.

Thanks

Sunil

[Sunil]

Hi,
I have the same issue for Radar Column chart which is similar to this sample i created 
http://dojo.telerik.com/@Sunil/aFowI
I tried adding " " for alternate labels, it works on UI but if the image is exported to PDF/Excel then we can see   as a text.
Thanks
Sunil

[T. Tsonev]

Hello,

Please accept my apologies for the delayed response.

I've lost quite a lot of time with a more complex solution, but in the end settled on a simpler approach.
You just need to insert line breaks - "\n", in the label text via the template.

            categoryAxis: {
              field: "name",
              labels: {
                template: function(e) {
                  return e.value.split("+ ").join("+\n");
                }
              }
            }

See the updated example. I'll also update the Show Category Axis Labels on Multiple Lines how-to article.

Regards,
T. Tsonev
Telerik

 

 

[Sunil]

Thank you for your reply.

I tried this example before my post 

function labelTemplate(e) {var ds = $("#chart").data("kendoChart").dataSource;var index = ds.indexOf(e.dataItem);var label = index % 2 !== 0 ? " \n" : ""; label += e.value;return label;}

This works perfect on UI, but when i export the image to PDF the labels on PDF shows " " as well with the actual label.

Solution above works fine to add a new line character within a word, I modified my example with a long label.

http://dojo.telerik.com/@Sunil/aFowI

Thanks

Sunil