KendoUI for angular - Arcguage - How to change stroke line gap for the guage scale?

[DotMax]

I am using arcguage from kendoui for angular. I was able to change the size of the graph by mentioning [rangeSize]="60" in kendo-arcgauge-scale.

But, by default, this stroke is filling up round shaped (ugly and wiered) , There should be a way to change that to normal (square), How to do that?

 

Your documentation for this KendoUIAngular is pathetic and unuseful. You need to provide on how to use all these settings in your graps/grids.

To findout how to make the bigger chart by using [rangeSize] in kendo-arcgauge-scale took almost 2 days since there was no proper documentation.

 

Can you let me know how to get rid of the " stroke-linecap: round;" to " stroke-linecap: square;" ?

 

Here is the plunkr - https://plnkr.co/edit/k7A4elikxfwsNGQYvxRH?p=preview

 

Here is my app.component.ts (incase if the plunkr does not have proper code).

 

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

@Component({
    selector: 'my-app',
    template: `
      <kendo-arcgauge [value]="value" [colors]="colors" >
            <kendo-arcgauge-scale [min]="0" [max]="100" [rangeSize]="60" >
            </kendo-arcgauge-scale>
             <ng-template kendoArcGaugeCenterTemplate let-value="value">
                Percent Paid - {{ value }}%
            </ng-template>
        </kendo-arcgauge >

    `,
     styles: [`
        .k-gauge {
            display: block;
             
        }
       
    `]
})
export export class AppComponent {
 public value: number = 60;
    public colors: any[] = [{
        to: 25,
        color: '#d7d513',
        width:'30'
    }, {
        from: 25,
        to: 50,
        color: '#d7d513',
        width:'30'
    }, {
        from: 50,
        to: 75,
        color: '#d7d513',
        width:'30'
    }, {
        from: 75,
        color: '#d7d513',
        width:'30'
    }];
}

[Daniel]

Hello,

Thank you for the feedback. We will work on improving the documentation with additional examples that demonstrate how to use the options and their effect.

Currently there isn't an option to change the lineCap. We will consider exposing an option for future versions.

Regards,
Daniel
Progress Telerik

[DotMax]

Is there a way to override the style for stroke-linecap to "none" or "butt" insted of round or can we do it via java script (document.getElementsByClassName('k-chart-surface')[0].getElementsByTagName('path')[2].attributes[3] = "none")

 

Can you please let us know? We need to use this guage but we dont like this rounded guage. We need to make it proper guage.

 

Thanks

[DotMax]

Ignore my previous comment since I was able to write a override CSS to change the round stroke-linecap to "butt"

Thanks