Kendo Angular Bullet Chart Customize Target

2 posts, 0 answers
  1. Darren
    Darren avatar
    1 posts
    Member since:
    May 2019

    Posted 26 Nov 2020 Link to this post

    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]];

  2. Svetlin
    Admin
    Svetlin avatar
    465 posts

    Posted 30 Nov 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top