Kendo Angular Bullet Chart Customize Target

[Darren]

I am attempting to include a Kendo Bullet Chart in my .Net Core Angular Application.

The one issue I have come up against is finding the functionality needed to customize the Target Line (color, width, shape potentially).

I have seen that this is possible for Kendo UI in Jquery, etc. but I cannot find an example in Angular.

I have attached an example of what I currently have (top) vs what I am looking for(bottom).

Any help would be appreciated.

Note:

Below is the html and typescript code showing how the line is currently getting populated.

<kendo-chart-series-item type="bullet" [(data)]="temp" color="#fff" >
          </kendo-chart-series-item>

 

public temp: any[] = [[0,2]];

[Svet]

Hi Darren,

Thank you for the provided screenshot.

The requirement can be achieved using the target input property of the SeriesItemComponent:

          <kendo-chart-series-item type="bullet" [data]="hum" color="#0058e9" [target]="{line: {width: 10}}">
          </kendo-chart-series-item>

Please check the following example:

https://stackblitz.com/edit/angular-gaucsf?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik