gistfile1.txt

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

@inject(HttpClient)
export class BasicUse {

  constructor(httpClient) {
    this.httpClient = httpClient;
  }

  activate() {
    this.buildStuff();

    this.seriesCategoryAxisSet();
    this.seriesDefaultsSet();
    this.seriesSet();
    this.seriesValueAxisSet();
    this.seriesTooltipSet();
    this.seriesCategoryAxisSet();
  }

  buildStuff() {
    this.datasource = new kendo.data.DataSource({
      transport: {
        read: (options) => {
          this.httpClient.get('./src/samples/chart/line-charts/basic-use.json')
          .then((response) => JSON.parse(response.response).data)
          .then(data => {
            options.success(data);
          });
        }
      }
    });
  }

  seriesDefaultsSet(){
    return this.seriesDefaults= {
      type: 'line',
      labels: {
        visible: true,
        format: '{0}%',
        background: 'transparent'
      }
    };
  }

  seriesSet(){
    return this.series= [{
      field: 'Value',
      name: 'Value'
    }];
  }

  seriesValueAxisSet(){
    return this.seriesValueAxis = {
      labels: {
        format: '{0}%'
      },
      line: {
        visible: false
      }
    };
  }

  seriesCategoryAxisSet(){
    return this.seriesCategoryAxis = {
      field: 'Timestamp',
      majorGridLines: {
        visible: false
      }
    };
  }

  seriesTooltipSet(){
    return this.seriesTooltip = {
      visible: false,
    };
  }
}

gistfile2.txt

<template>
<ak-chart k-title.bind="{text: 'TEST'}"
              k-data-source.bind="datasource"
              k-legend.bind="{position: 'bottom'}"
              k-series.bind="series"
              k-series-defaults.bind="seriesDefaults"
              k-series-axis.bind="seriesValueAxis"
              k-category-axis.bind="seriesCategoryAxis"
              k-tooltip.bind="seriesTooltip">
    </ak-chart>
</template>