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

Fixed number of categories nomatter how much data points

2 Answers 21 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
GIAnet
Top achievements
Rank 1
Iron
GIAnet asked on 20 Nov 2019, 04:00 PM

Hi,

 

I'm currently using on an area chart. I am displaying multiple charts below each other, some have 3 data points, some up to 15.

The chart has a fixed width. The maxvalue of the x-axis is set to 15.

The Problem:

 No matter how many datapoints for each series there are, the chart always stretches the series to the whole width of the plotarea. (see attached screenshot for current unwanted behaviour.)
The behaviour I want to achieve is a fixed width between every category/major tick, so that all data points have the same distance inbetween, no matter if I have 2 or 15.  So if there are e.g. only 4 data points, the leftmost 4 categories on the x axis are used, and the other 11 are left blank.(see 2nd photoshopped screenshot with wanted behaviour)

So that if multiple of these charts are compared with each other, each category has the same width.

 

Is there any way to accomplish this? Or is itperhaps possible to scale the width of the whole chart after the datasource is assigned to the chart?

Thanks in advance for any help!

Greetings Markus

2 Answers, 1 is accepted

Sort by
0
GIAnet
Top achievements
Rank 1
Iron
answered on 20 Nov 2019, 04:34 PM

I experimented a bit, and think I can live with resizing the whole chart's width according to the number of elements (max elements = 15).

The formula I use is: width =  (base width)+ Math.Min(((Number of data points) * 50), 750)

With this i almost get the behaviou I need. If there is any direct possibility to manipulate the charts x axis, I am interested in the answer, though ;-)

Greetings, Markus

0
Eyup
Telerik team
answered on 25 Nov 2019, 01:22 PM

Hi Markus,

 

I'm glad that you've managed to resolve the case.

There are no direct ways to accomplish that otherwise. Perhaps, 2 possible alternative options could b:

1. Fill-up the chart data with blank values beforehand

2. There is also styling padding provided by the underlying Kendo chart, however, I am not sure this could be applicable in this scenario:
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.padding

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart (HTML5)
Asked by
GIAnet
Top achievements
Rank 1
Iron
Answers by
GIAnet
Top achievements
Rank 1
Iron
Eyup
Telerik team
Share this question
or