Puedes usar [Map](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map), para guardar clave , valor, en el ejemplo la clave seria el producto y los valores seria el producto mas sus valores! y luegos convertilos en array con la funcion [Array.from][1]

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    let data= [ {cant: 1, producto: "ZAPATOS"},
                {cant: 9, producto: "CAMISAS"},
                {cant: 30, producto: "ZAPATOS"}
              ]

    const grafico = new Map()
    for (let i = 0; i< data.length; i++){
      valor = grafico.get(data[i].producto)
      if(valor){
        valor.push(data[i].cant)
        
      }else{
        grafico.set(data[i].producto, [data[i].producto, data[i].cant])
        
      }
     

    }
    const resultado_final = Array.from(grafico.values())
    console.log(resultado_final)

<!-- end snippet -->

> La linea `valor.push(data[i].cant)` tienen la misma referencia del objeto por ello no lo reasigne (array es de tipo objeto)

  [1]: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/from