Bullet charts: basic use

app.html

<template>
   <div class="demo-section k-content">
      <table class="history">
        <tr>
            <td class="item">mmHg&nbsp;&nbsp;&nbsp;</td>
            <td>
              <ak-chart
                        style="height: 65px"
                        k-series.bind="series_mmHg"
                        k-chart-area.bind="chartArea"
                        k-category-axis.bind="categoryAxis_mmHg"
                        k-value-axis.bind="valueAxis_mmHg"
                        k-tooltip.bind="tooltip">
              </ak-chart>
              <br>
              <br>
            </td>
        </tr>
        <tr>
            <td class="item">hPa</td>
            <td>
              <ak-chart
                        style="height: 65px"
                        k-series.bind="series_hPa"
                        k-chart-area.bind="chartArea"
                        k-category-axis.bind="categoryAxis_hPa"
                        k-value-axis.bind="valueAxis_hPa"
                        k-tooltip.bind="tooltip">
              </ak-chart>
              <br>
              <br>
            </td>
        </tr>
        <tr>
            <td class="item">hum</td>
            <td>
              <ak-chart
                        style="height: 65px"
                        k-series.bind="series_hum"
                        k-chart-area.bind="chartArea"
                        k-category-axis.bind="categoryAxis_hum"
                        k-value-axis.bind="valueAxis_hum"
                        k-tooltip.bind="tooltip">
              </ak-chart>
              <br>
              <br>
            </td>
        </tr>
        <tr>
            <td class="item">temp</td>
            <td>
              <ak-chart
                        style="height: 65px"
                        k-series.bind="series_temp"
                        k-chart-area.bind="chartArea"
                        k-category-axis.bind="categoryAxis_temp"
                        k-value-axis.bind="valueAxis_temp"
                        k-tooltip.bind="tooltip">
              </ak-chart>
                <br>
                <br>
            </td>
        </tr>
      </table>
  </div>
</template>

app.js

export class BasicUse {

  height = 120;

  legend = {
    visible: false
  };

  series_mmHg = [{
    type: 'bullet',
    data: [[750, 762.5]]
  }];

  series_hPa = [{
    type: 'bullet',
    data: [[1001, 1017]]
  }];

  series_hum = [{
    type: 'bullet',
    data: [[45, 60]]
  }];

  series_temp = [{
    type: 'bullet',
    data: [[25, 22]]
  }];

  chartArea = {
    margin: {
      left: 0
    }
  };

  categoryAxis = {
    majorGridLines: {
      visible: false
    },
    majorTicks: {
      visible: false
    }
  };

  valueAxis_mmHg = [{
    plotBands: [{
      from: 715, to: 752, color: '#ccc', opacity: 0.6
    }, {
      from: 752, to: 772, color: '#ccc', opacity: 0.3
    }],
    majorGridLines: {
      visible: false
    },
    min: 715,
    max: 795,
    minorTicks: {
      visible: true
    }
  }];

  valueAxis_hPa = [{
    plotBands: [{
      from: 955, to: 1002, color: '#ccc', opacity: 0.6
    }, {
      from: 1002, to: 1027, color: '#ccc', opacity: 0.3
    }],
    majorGridLines: {
      visible: false
    },
    min: 955,
    max: 1055,
    minorTicks: {
      visible: true
    }
  }];

  valueAxis_hum = [{
    plotBands: [{
      from: 0, to: 33, color: '#ccc', opacity: 0.6
    }, {
      from: 33, to: 66, color: '#ccc', opacity: 0.3
    }],
    majorGridLines: {
      visible: false
    },
    min: 0,
    max: 100,
    minorTicks: {
      visible: true
    }
  }];

  valueAxis_temp = [{
    plotBands: [{
      from: 0, to: 10, color: 'yellow', opacity: 0.3
    }, {
      from: 10, to: 20, color: 'orange', opacity: 0.3
    }, {
      from: 20, to: 30, color: 'red', opacity: 0.3
    }],
    majorGridLines: {
      visible: false
    },
    min: 0,
    max: 30,
    minorTicks: {
      visible: true
    }
  }];

  tooltip_mmHg = {
    visible: true,
    format: '{0}%',
    template: '${series.name} ${value}'
  }
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}