Telerik Forums
Kendo UI for Angular Forum
1 answer
49 views

Hello ,

Kindly Have issue with stacked bar when try to draw two items in chart  with specified with as the below  

<kendo-chart-series>
<kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[97]">
</kendo-chart-series-item>
<kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[7]">
</kendo-chart-series-item>

</kendo-chart-series>

the width of the first element is less than the second element as the below screen

Can Anyone help on that ?

 

Hetali
Telerik team
 answered on 19 Sep 2023
1 answer
43 views

min' since it isn't a known property of 'kendo-chart-value-axis-item-labels

 


<kendo-chart-value-axis>
	<kendo-chart-value-axis-item >
		<kendo-chart-value-axis-item-labels [content]="utilsService.label" [min]="minVal">
		</kendo-chart-value-axis-item-labels>
	</kendo-chart-value-axis-item>
</kendo-chart-value-axis>

 

Hetali
Telerik team
 answered on 08 Aug 2023
1 answer
50 views

Hi

I have the following data (just an selection):​

0: Object { myDate: Date Fri Jul 28 2023 17:43:24 GMT+0930 (Australian Central Standard Time), myTime: "17:43", myText: "NOT_OCCUPIED" }
​1: Object { myDate: Date Fri Jul 28 2023 17:32:10 GMT+0930 (Australian Central Standard Time), myTime: "17:32", myText: "OCCUPIED" }
​2: Object { myDate: Date Thu Jul 27 2023 19:50:37 GMT+0930 (Australian Central Standard Time), myTime: "19:50", myText: "NOT_OCCUPIED" }
​3: Object { myDate: Date Thu Jul 27 2023 19:33:46 GMT+0930 (Australian Central Standard Time), myTime: "19:33", myText: "OCCUPIED" }
​4: Object { myDate: Date Thu Jul 27 2023 17:41:13 GMT+0930 (Australian Central Standard Time), myTime: "17:41", myText: "NOT_OCCUPIED" }
​5: Object { myDate: Date Thu Jul 27 2023 16:50:35 GMT+0930 (Australian Central Standard Time), myTime: "16:50", myText: "OCCUPIED" }
​6: Object { myDate: Date Thu Jul 27 2023 15:47:44 GMT+0930 (Australian Central Standard Time), myTime: "15:47", myText: "NOT_OCCUPIED" }

which basically just lists when somebody is at their desk (occupied/not_occupied). This is nothing sinister - just a desk sharing situation :) - we would like visualised when the desks are being used. I would now like to have a chart that on the y axis (vertically) has two entries, occupied and not occupied. The x-axis (horizontally) has the date in 4 hour increments. the visualisation then runs from left to right and when it is occupied (eg. above 17:32 - 17:43) I would like there to be a bar shown i.e. filled, when not occupied then nothing shown. The opposite then for not occupied. Something like a stacked bar chart but only with 'gaps' if that makes sense. 

Something like this just not so ugly :) 


Anybody have any ideas which chart I could use for this

Thank you

Ursus

Yanmario
Telerik team
 answered on 02 Aug 2023
1 answer
103 views

Hi, if we are using Kendo Chart (Angular I believe) on a new project and i need the developers to replicate the example wireframe column chart below.
I have been advised that they can't get the column totals to appear at the top of the columns. Is this possible and if so what do they need to do to get the column totals at the top of the columns using angular?

 

 

Any help would be appreciated.

Regards

Alan

 

Hetali
Telerik team
 answered on 15 Jun 2023
2 answers
148 views
I just updated to 13.0.2 and get the following error in ng serve:

Error: node_modules/@progress/kendo-angular-charts/chart.component.d.ts:56:33 - error TS2307: Cannot find module '@angular/core/core' or its corresponding type declarations.

56 import { EmbeddedViewRef } from '@angular/core/core';
                                   ~~~~~~~~~~~~~~~~~~~~


These are from the last section of imports in chart.component.d.ts:

import { ZoomStartEvent } from './events/zoom-start-event';
import { SeriesComponent } from './chart/series.component';
import { EmbeddedViewRef } from '@angular/core/core';
import { DrilldownEvent } from './events/drilldown-event';
import * as i0 from "@angular/core";
Yanmario
Telerik team
 answered on 08 Jun 2023
1 answer
63 views

Hello, I followed the instructions in that forum to make this graph, but now I would like to know what to do so that an element, whether at the beginning, middle or end, has a minimum space so that these things do not happen. (and also center the numbers since I decrease the height in half to make it look thinner.)

https://www.telerik.com/forums/100-stacked-bar-chart-with-rounded-ends 

 

 

 

Camilo
Top achievements
Rank 1
Iron
 answered on 06 Jun 2023
1 answer
129 views

 

 

Hi Team,

I am referring this example to implement stacked column chart using a complex array object. It is rendering the chart, but it is not rendering the column with multi colors as shown in the example.

Excpected:

Actual:

Please refer the below the code snippet and the data which I am trying to bind and help me in correcting the code/data to render the expected chart output.

Code:

 <kendo-chart>
 <kendo-chart-series>
 <kendo-chart-series-item type="column" [stack]="true" *ngFor="let item of items" [data]="item" field="bandValue" categoryField="category">   </kendo-chart-series-item>
 </kendo-chart-series>
 </kendo-chart>

Data:

items = [
    [
      {
        category: 'TATA',
        bandValue: 1,
      },
      {
        category: 'TATA',
        bandValue: 4,
      },
      {
        category: 'TATA',
        bandValue: 7,
      },
    ],
    [
      {
        category: 'FORD',
        bandValue: 1,
      },
      {
        category: 'FORD',
        bandValue: 4,
      },
      {
        category: 'FORD',
        bandValue: 9,
      },
    ],
    [
      {
        category: 'GM',
        bandValue: 1,
      },
      {
        category: 'GM',
        bandValue: 4,
      },
      {
        category: 'GM',
        bandValue: 3,
      },
    ],
  ];

 

Thanks!

Martin Bechev
Telerik team
 answered on 01 Jun 2023
2 answers
49 views

Hello everyone, I currently have this graphic and I am trying to round the labels that are with a blue border so that they are more like the round buttons in the second image.

 

 

Martin Bechev
Telerik team
 answered on 29 May 2023
1 answer
207 views
I have been toying around with a couple solutions I have found online for this but nothing has worked so far. I went through the documentation as-well but it seems that the example given here https://www.telerik.com/kendo-angular-ui/components/charts/api/MarkerType/ is changing the series icons not the legend. Any help would be greatly appreciated. 
Hetali
Telerik team
 answered on 16 May 2023
1 answer
48 views

Hello,

is it possible to have all the chart configuration in a object that implements ChartOptions and then pass it to the chart component in the template?

Something like this:

const myConfig: ChartOptions = {
  series: mySeries,
  title: myTitle,
  ...
}

and then in the template:

<kendo-chart [chartOptions]="myConfig"></kendo-chart>

Thank you.

Kind regards.

Martin Bechev
Telerik team
 answered on 13 Apr 2023
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?