JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<div id="myDiv"></div>

JavaScript

var series= [
    {
      "value": 100, "label": "F1"
    },
    {
      "value": 25, "label": "F2"
    },
    {
      "value": 30, "label": "Jedi Jeremiah 555"
    },
    {
      "value": 40, "label": "F4"
    },
    {
      "value": 55, "label": "F5"
    },
    {
      "value": 60, "label": "F6"
    },
    {
      "value": 71, "label": "F7"
    },
    {
      "value": 15, "label": "F8"
    },
    {
      "value": 88, "label": "F9"
    },
    {
      "value": 90, "label": "F10"
    }
  ];
  
var plotlyData = [];
$.each(series, function(index, serie){
  var plotlyBarObj = {
    name: serie.label,
    orientation: 'h',
    x: [serie.value],
    y : [serie.label],
    type: 'bar'
  };

  plotlyData.push(plotlyBarObj);
});

var avgObj={
  name: 'average organization',
  type: 'scatter',
  x: [60],
  orientation: 'v',
  type: 'bar'
}

plotlyData.push(avgObj);

Plotly.newPlot("myDiv",plotlyData);