Telerik Forums
Kendo UI for Angular Forum
1 answer
8 views

Hi,

I am trying to evaluate the possibilities to have horizontal lines for thresholds, maximums, minimums etc.
On the net I found a somewhat old post regarding stripLines, but this does not seem to be supported anymore. I can't find something in the docs / API.

So what I found next are plotbands, but manly these seem to be more suitable for areas, not really for lines.
This leaves me with custom plotbands using the drawing API (see: https://www.telerik.com/kendo-angular-ui/components/charts/elements/plot-bands/#toc-custom-plot-bands).
But this seems a bit overkill for a simple horizontal line which from my perspective only needs very basic things like value, title and let's say some styling like color, opacity, line thickness and the likes...

So my question: Is there a simple way for horizontal lines that I am missing or is the custom plotband the way to go in this matter?

Best Regards,
FirestormHell

 

Yanmario
Telerik team
 answered on 08 May 2024
3 answers
16 views

Hi there,

I am new to Kendo UI Charts. Am I getting this right? The navigator is only for stock charts?
I don't get why, this would also be very helpfull for line charts. I could only find a very old question regarding this, with not a really good answer.

Is it still the case that there is no way to display a line chart with a navigator? Or is it possible to display a line in the stockchart kind of similar to a line chart instead of candlesticks?

Best Regards,

FirestormHell

Leo
Top achievements
Rank 1
Iron
 updated answer on 30 Apr 2024
1 answer
21 views

I'm creating a target line for a 100% stacked column chart. But the target line is not what I want. 

Here is what want: the target is about at 80%.

Here is what I'm getting:

One point:

Two points:

 

Here is the code:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="column"
          [stack]="{ type: '100%' }"
          [data]="[20]"
          [color]="'#FFD100'"
        >
        </kendo-chart-series-item>
        <kendo-chart-series-item
          type="column"
          [data]="[30]"
          [color]="'#FFEAB1'"
        >
        </kendo-chart-series-item>
        <kendo-chart-series-item
          type="column"
          [stack]="{ type: '100%' }"
          [data]="[40]"
          [color]="'#FFF8E0'"
        >
        </kendo-chart-series-item>
        <kendo-chart-series-item
          type="line"
          [data]="[{ category: 0, value: 0.8 }, { category: 1, value: 0.8 }]"
        >
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [visible]="false"></kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-value-axis>
        <kendo-chart-value-axis-item [visible]="false"></kendo-chart-value-axis-item>
      </kendo-chart-value-axis>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
      <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
    </kendo-chart>
  `
})
export class AppComponent {
  
}


Yanmario
Telerik team
 answered on 16 Apr 2024
1 answer
15 views

Hello,

Linestyle option of scatterLine chart is not working. Whatever value I put there, it is not changing line style. It is always normal.

Even if I put just some random value, it does not throw any error and plotting chart as normal linestyle.

I am trying to make it smooth. Let me know what I am missing.

    <kendo-chart-series-defaults
        [style]="'smooth'"
        type="scatterLine"
    >
    </kendo-chart-series-defaults>

 

 

Yanmario
Telerik team
 answered on 06 Mar 2024
1 answer
20 views

I tried use the example from the demo page, and enable the legend, but nothing is happening. What did I do wrong?

<kendo-chart>
    <kendo-chart-series>
      <kendo-chart-series-item type="bar" [stack]="true" [data]="[1, 2, 3]">
      </kendo-chart-series-item>
      <kendo-chart-series-item type="bar" [data]="[1, -1, 1]">
      </kendo-chart-series-item>
      <kendo-chart-series-item type="bar" [data]="[1, -1, 1]">
      </kendo-chart-series-item>
    </kendo-chart-series>
    <kendo-chart-legend [visible]="true"></kendo-chart-legend>
  </kendo-chart>
Yanmario
Telerik team
 answered on 05 Mar 2024
1 answer
54 views

Hello,

We are currently experiencing a problem while presenting a stacked chart with approximately 8000 records. When we try to display all 8000 records at once, the chart keeps loading and the browser crashes after a few seconds, basically the screen freezes. We are currently using the chrome browser to run the web application.But when we load the chart with around 3000 records, it displays all of them without any problems. 
As a result, we only face this problem when we attempt to load a huge number of records at once. So my concern is whether there is a fixed number of records that we can load for a stacked chart at once. 

Martin Bechev
Telerik team
 answered on 11 Dec 2023
1 answer
36 views

https://www.telerik.com/kendo-angular-ui/components/charts/drill-down/

 

Error: src/app/dashboard/dashboard.component.html:20:23 - error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ "Company A": { product: string; sales: number; }[]; "Company B": { product: string; sales: number; }[]; }'.

20               [data]="productData[company]"
                         ~~~~~~~~~~~~~~~~~~~~
 
Martin Bechev
Telerik team
 answered on 05 Oct 2023
1 answer
48 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
41 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
48 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
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?