Extend the target line for the 100% Stacked Column Chart

[Haolin]

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 {
  
}

[Haolin]

Didn't find a solution. Then I DIY it...

[Yanmario]

Hi Haolin,

What I would suggest for the specific use case is to utilize the visuals property of the series item and draw the line at the specific. I've managed to create a quick example for your desired lining from the first screenshot:

https://stackblitz.com/edit/angular-gkydyq?file=src%2Fapp%2Fapp.component.ts

An example that has some coordination:

https://stackblitz.com/edit/angular-vfzrcl-ize99f?file=src%2Fapp%2Fapp.component.ts

I will suggest checking out our Drawing library and some of the knowledge base examples that are demonstrating custom visuals:

https://www.telerik.com/kendo-angular-ui/components/drawing/

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/bar-chart-custom-visuals/

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/chart-render-bar-with-custom-visual/

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/chart-fixed-bar-size/

I hope this helps.

Regards,
Yanmario
Progress Telerik

[Haolin]

The visual one looks nice. Thanks.