以下是一个使用Angular和Kendo UI Charts来创建带有水平滚动条的示例代码：

1. 首先，确保你已经正确引入了Angular和Kendo UI的依赖项。

2. 在你的Angular组件的HTML模板中，添加一个具有id的div元素，用于容纳Kendo Chart：

3. 在组件的Typescript文件中，导入所需的依赖项：

import { Component, OnInit } from '@angular/core';
import { Chart, ChartOptions } from '@progress/kendo-angular-charts';
import { sampleData } from './sample-data'; // 导入示例数据

4. 在组件类中，创建一个chartOptions对象，其中包含具有水平滚动条的chart配置：

export class MyComponent implements OnInit {
  public chartOptions: ChartOptions = {
    series: [{
      type: 'line',
      data: sampleData, // 使用示例数据
      missingValues: 'interpolate'
    }],
    navigator: { // 水平滚动条配置
      series: {
        type: 'area',
        markers: {
          visible: false
        }
      },
      select: {
        from: new Date(2014, 2, 1),
        to: new Date(2015, 2, 1)
      }
    },
    valueAxis: { // 值轴配置
      labels: {
        format: '{0}'
      },
      line: {
        visible: false
      },
      majorUnit: 1000
    },
    categoryAxis: { // 类别轴配置
      baseUnit: 'months',
      labels: {
        format: 'MMM'
      },
      majorGridLines: {
        visible: false
      }
    }
  };

  // ...
}

5. 在组件的ngOnInit方法中，使用Kendo Chart的from方法来创建一个chart实例，并将其附加到div元素上：

export class MyComponent implements OnInit {
  // ...

  ngOnInit() {
    const element = document.getElementById('chartContainer');
    const chart = new Chart(element, this.chartOptions);
  }
}

6. 最后，确保在你的模块文件中正确导入和声明该组件。

通过按照上述步骤，你应该能够创建一个带有水平滚动条的Kendo Chart。请根据你的需求调整chartOptions对象中的配置选项。