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);
<div id="container"></div>
#container { height: 300px; }