This is a migrated thread and some comments may be shown as answers.
Chart with negative value
5 Answers 97 Views
This is a migrated thread and some comments may be shown as answers.
Jianxun
Top achievements
Rank 1
Jianxun asked on 08 Jan 2014, 11:57 AM
hi team,  I want to show a chart with some negative values, ( and also positive values). However, I found that the xaxis labels are always under the line y=0. I do not want them appear in the chart, instead, I would like to show label in the bottom to the chart. I notice in your demo:


categoryAxis: {
...
labels: {
padding: {top: 145}
}
},

than the padding parameter can set the xaxis label's position. However, since my data is dynamic, I do not know how distance I should padding. Is there a way to automatically determine the position of xaxis label to the bottom?

5 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 08 Jan 2014, 02:02 PM
Hello Jianxun,

I am afraid what you would like to achieve is not supported by Kendo UI Chart. As a possible workaround I can suggest dynamically changing the categoryAxis.labels.padding through the chart.options and refresh the chart.:
var chart = $("#chart").data("kendoChart");
chart.options.categoryAxis.labels.rotation = 145;
chart.refresh();

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jianxun
Top achievements
Rank 1
answered on 09 Jan 2014, 02:10 AM
But how could we determine the value of labels.padding?  
for example, the chart has a max value of 100, and min value of -60, how could we calculate the padding value?
1
Accepted
Iliana Nikolova
Telerik team
answered on 10 Jan 2014, 04:27 PM
Hi Jianxun,

I was thinking on this scenario and can suggest an easier workaround:
  • Use two category axes (instead of one);
  • Set the point of interception between the axes in a high negative value.
For your convenience I prepared a simple jsBin example which demonstrates the suggested approach in action - please check it and let me know if this fits your requirements.

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jianxun
Top achievements
Rank 1
answered on 12 Jan 2014, 05:39 AM
Thanks Iliana, this works for me !
0
Umutcan
Top achievements
Rank 1
Iron
answered on 04 May 2021, 01:16 PM | edited on 05 May 2021, 03:58 PM
I faced the same problem and the solution Iliana suggested worked like a charm but there is a problem. I was setting the label step while retrieving data with ajax like this:
var categoryAxis = chart.options.categoryAxis.labels;
dates = response.map(a => a.dates);
categoryAxis.labels.step = Math.ceil(dates.length / 10);
But after adding a second label, this error occurred: "Uncaught TypeError: Cannot read property 'labels' of undefined".
How can I specifically get the second label and set step?

Update:

I finally accessed the options of the second labels with the following code:
var chart = $("#chart").data("kendoChart");
chart.dataSource.data(response);
dates = response.map(a => a.dates);
var options = chart.options;
options.categoryAxis[1].labels.step = Math.ceil(dates.length / 10);
chart.setOptions(options);
Hope this helps if someone has a similar problem.
Whenever multiple category axes are declared, you could access them by name instead of a hard-coded numeric value from the categoryAxis collection. You should pass the name of the axis to the getAxis method and it will return the respective axis. And, you would be able to perform further modifications.
- by
Tsvetomir
Telerik team
on 06 May 2021, 06:22 AM
Asked by
Jianxun
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Jianxun
Top achievements
Rank 1
Umutcan
Top achievements
Rank 1
Iron
Share this question
or