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: 350px;
}

JavaScript

const result = {
  "result": [{
    "value": [{
      "product.name": "banana",
      "result": 53
    }, {
      "product.name": "avocado",
      "result": 47
    }, {
      "product.name": "apple",
      "result": 24
    }, {
      "product.name": "peach",
      "result": 76
    }],
    "timeframe": {
      "start": "2020-03-19T23:00:00.000Z",
      "end": "2020-03-20T23:00:00.000Z"
    }
  }, {
    "value": [{
      "product.name": "banana",
      "result": 32
    }, {
      "product.name": "avocado",
      "result": 24
    }, {
      "product.name": "apple",
      "result": 56
    }, {
      "product.name": "peach",
      "result": 32
    }],
    "timeframe": {
      "start": "2020-03-20T23:00:00.000Z",
      "end": "2020-03-21T23:00:00.000Z"
    }
  }, {
    "value": [{
      "product.name": "banana",
      "result": 27
    }, {
      "product.name": "avocado",
      "result": 32
    }, {
      "product.name": "apple",
      "result": 18
    }, {
      "product.name": "peach",
      "result": 33
    }],
    "timeframe": {
      "start": "2020-03-21T23:00:00.000Z",
      "end": "2020-03-22T23:00:00.000Z"
    }
  }, {
    "value": [{
      "product.name": "banana",
      "result": 68
    }, {
      "product.name": "avocado",
      "result": 56
    }, {
      "product.name": "apple",
      "result": 65
    }, {
      "product.name": "peach",
      "result": 59
    }],
    "timeframe": {
      "start": "2020-03-22T23:00:00.000Z",
      "end": "2020-03-23T23:00:00.000Z"
    }
  }, {
    "value": [{
      "product.name": "banana",
      "result": 38
    }, {
      "product.name": "avocado",
      "result": 48
    }, {
      "product.name": "apple",
      "result": 50
    }, {
      "product.name": "peach",
      "result": 26
    }],
    "timeframe": {
      "start": "2020-03-23T23:00:00.000Z",
      "end": "2020-03-24T23:00:00.000Z"
    }
  }, {
    "value": [{
      "product.name": "banana",
      "result": 34
    }, {
      "product.name": "avocado",
     ...