Telerik Forums
Kendo UI for Angular Forum
0 answers
39 views
0 answers
46 views

Dear Supporter,

i tried to use the 

@progress/kendo-angular-gauges@4.1.0

in combination with the bootrap theme version  

@progress/kendo-theme-bootstrap: 4.36.0

According to your documents, the GaugesModule supportes the theming versions >4.19.

Unfortunately the gauge don´t get colorized, so that it is invisible.
I prepared a StackBlitz demo where you can check its behaviour (stackblitz demo).

If i use the css stylesheet link in the index.html

 <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@4.36.0/dist/all.css"/>

the gauges are visible.

If i use all.scss

@import "~@progress/kendo-theme-bootstrap/scss/all.scss";

in the styles.scss instead of the link, the gauges dissapear.


I am looking forward to get the gauges working with the theme version 4.36.0 and the .scss stylesheets.

Thank you in advance.
best regards

Michael
Top achievements
Rank 1
Veteran
Iron
 updated question on 15 Mar 2022
1 answer
90 views

this is my custom implementation of the labels:

 

               <kendo-radialgauge-scale-labels

                 //what is the syntax to call my function ???
                content="getGaugeLabels(val)"  

                position="outside">
                </kendo-radialgauge-scale-labels>

 

how can I set custom labels ??

in the api documentation => 

content?
(e: any) => string
The function which returns the label content.
The available fields in the function argument are:
value—The value of the label.

 

how can I use that in angular 9 ????

Svet
Telerik team
 answered on 19 Mar 2021
1 answer
47 views
We need a way to use an SVG or PNG graphic as a display needle. Is this currently possible? If yes how? If not, there will be functionality in the future.
Dimiter Topalov
Telerik team
 answered on 11 Jun 2020
1 answer
83 views

I have a linear gauge

<div style="width:100%;">
  <kendo-lineargauge #myGauge="kendoLinearGauge" style="width:100%"  [scale]="{ vertical: false,max: 100 }" [pointer]="{ value: progressValue }">
  </kendo-lineargauge>
</div>

I update it from signal r.

this._connection.on('taskProgressChanged', data => {
  console.log(data);
  this.progressValue = Number(data);
  this.myGauge.resize();
 
  var myPointer : any = this.myGauge.pointer;
  myPointer.value = data;
  this.messages.push(data);
});

 

In a component that has these configurations

public progressValue = 0;
@ViewChild(LinearGaugeComponent, { static: false })
public myGauge: LinearGaugeComponent;

However,
1.  the gauge does not update with the value dynamically unless, I click on the gauge.  How do I update the gauge dynamically?
2.  the gauge does not resize to 100% of the width until the resize method is called.  How do I default the width of the gauge to 100%?

 

n/a
Top achievements
Rank 1
 answered on 27 Aug 2019
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?