Hide Vertical Lines

[Thomas]

Hello,

is there a way to hide the vertical lines in this chart type. I need only this horizontal lines in this chart-type

 

thanks for your work

[Svet]

Hi Thomas,

Thank you for the screenshot.

We can achieve the desired behavior by using the [visual] method of the SeriesItemComponent. Basically, we will create a Path for each point and add it to a Group with the help of the Drawing API. Check the following sample plunker demonstrating this approach:

https://plnkr.co/edit/1w6HP1RkzRbPJzyGHtPP?p=preview

The important parts are marked in red below:

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-title text="Units sold"></kendo-chart-title>
      <kendo-chart-series>
        <kendo-chart-series-item type="line"
        [markers]="{visible: false}"
        style="step"
        width="0"
        [data]="[20, 1, 18, 3, 15, 5, 10, 6, 9, 6, 10, 5, 13, 3, 16, 1, 19, 1, 20, 2, 18, 5, 12, 7, 10, 8]"
        [visual]="customVisual">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export export class AppComponent {

  customVisual(e){
          const group = new Group();
          e.points.forEach(point => {
             // Create a path and draw a straight line
            const path = new Path({ stroke: { color: e.series.color, width: 2},fill: {color: e.series.color}});
            path.moveTo(point.x - 10, point.y).lineTo(point.x + 10, point.y).close();
            group.append(path);
          })
        return group;
  }

}

I hope this helps. Let me know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Thomas]

Thanks nice to kow.

This is awsome

THX :-)