Chart with negative value

[Jianxun]

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?

[Iliana Dyankova]

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

[Jianxun]

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?

[Iliana Dyankova]

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

[Jianxun]

Thanks Iliana, this works for me !

[Umutcan]

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.

[Tsvetomir]

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.