Sample chart

HTML

<script src="https://cdn.jsdelivr.net/npm/@keen.io/dataviz@latest/dist/dataviz.min.js"></script>
<div id="container"></div>

CSS

#container {
  height: 300px;
}

JavaScript

const areaChart = new KeenDataviz({
  type: 'area',
  container: '#container',
  widget: {
    title: {
      content: 'Purchases',
    },
    subtitle: {
      content: 'Previous 5 minutes',
    },
    legend: {
      enabled: false,
    },
  },
  settings: {
    curve: 'spline',
    strokeWidth: 2,
    margins: {
      top: 30,
      left: 45,
      right: 30,
      bottom: 60
    },
    xScaleSettings: {
      type: 'band',
      formatLabel: label => new Date(label).toLocaleTimeString()
    },
    theme: {
      axisX: {
        enabled: true,
      },
    },
  },
});

const result = {
  "result": [{
      "value": 0,
      "timeframe": {
        "start": "2020-03-29T22:44:00.000Z",
        "end": "2020-03-29T22:45:00.000Z"
      }
    },
    {
      "value": 1,
      "timeframe": {
        "start": "2020-03-29T22:45:00.000Z",
        "end": "2020-03-29T22:46:00.000Z"
      }
    },
    {
      "value": 0,
      "timeframe": {
        "start": "2020-03-29T22:46:00.000Z",
        "end": "2020-03-29T22:47:00.000Z"
      }
    },
    {
      "value": 0,
      "timeframe": {
        "start": "2020-03-29T22:47:00.000Z",
        "end": "2020-03-29T22:48:00.000Z"
      }
    },
    {
      "value": 0,
      "timeframe": {
        "start": "2020-03-29T22:48:00.000Z",
        "end": "2020-03-29T22:49:00.000Z"
      }
    }
  ]
};

areaChart.render(result);